Getting error when binding PropertyPaneSlider value inside Carousel

Rajkiran Swain

4y981

I have a SPFX webpart which has developed in react js code. I have a PropertyPaneSlider value which I want to bind with Carousel interval dynamically.

nextIcon={

{Bindvalue}

{Bindvalue}

{Bindvalue}

-------------------------------------

PropertyPaneSlider('sliderSpeed',{

label:"Slider speed(in seconds)",

min:500,

max:10000

})

------------------------------------

Could youn please help me how to bind this so that I can increase and decrease the interval dynamically.

3 Replies
Know the answer? Post it — somebody with the same question will find it here.

Vaibhav Chauhan4y ago
Hi

Here is the demo code for basic .tsx file you can use in your webpart. You can use your Caraousel library here i have used react-carousel here.

import * as React from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';

export interface CarouselProps {
    description: string;
    sliderSpeed: number;
}

export default class DemoCarousel extends React.Component {

    constructor(props: CarouselProps) {
        super(props);
        //state declaration
        this.state = {};
    }

    public render(): React.ReactElement {
        return(
          this.props.sliderSpeed} nextIcon={"true" className="carousel-control-next-icon" />}>
          );
    }
}
Rajkiran Swain4y ago
Exactly. I did like this but its not working . see the below screenshot.
Vaibhav Chauhan4y ago
Hi You can access that property pane value in render function using this.properties.sliderSpeed which you can pass in tsx file as props and use it in Carousel control.

public render(): void {
    const element: React.ReactElement = React.createElement(
      Carousel,
      {
        Interval: this.properties.sliderSpeed
      }
    );

    ReactDom.render(element, this.domElement);
  }
You can use it in the control given below:
<Carousel  interval={this.props.sliderSpeed} nextIcon={<span aria-hidden="true" className="carousel-control-next-icon" />}>