How can I disable slider ?

[HeratPatel1]

If I want to disable my slider, is there any props available for that ? I update my slider with web-socket. thanks in advance.

[slnsrn]

I fixed it with return. Style is the same but it is ok.

durationChangeCallback = (duration) => {
     if (this.state.is_started) {
          return; // kind of disable 
     }else{
          this.setState({duration});
    }
}

[champi-dev]

I did it like this:

<Slider
    orientation='horizontal'
    min={1}
    max={5}
    labels={this.state.labels}
    value={this.state.sliderValue}
    onChange={(newValue) => {}}
/>

[pranay202]

React library already provides disable props. You need to make following changes in your code.

Make constructor with isDisable state with default false value

constructor(props){
super(props);
this.state={
isDisable:false
}

}

Add a function into onChange callback props

_checkMaximunSliderValue=(value)=>{
 If(value==100){ 
this.setState({isDisable:true})
}
}

Set this.state.isDisable in disable props

<VerticalSlider
  value={1}
  disabled={this.state.isDisable}
  min={0}
  max={100}
  onChange={(value: number) => {
    this._checkMaximunSliderValue(value);
  }}
  onComplete={(value: number) => {
    console.log("COMPLETE", value);
  }}
  width={50}
  height={300}
  step={1}
  borderRadius={5}
  minimumTrackTintColor={"gray"}
  maximumTrackTintColor={"tomato"}
  showBallIndicator
  ballIndicatorColor={"gray"}
  ballIndicatorTextColor={"white"}
/>;

[jivansupe]

You can simply add a disabled class as an additional class when you need to disable the slider. Worked for me.

.disabled {
   pointer-events: none;
   opacity: 0.7;
}

<Slider className={isDisabled ? "disabled" : ''}
            min={0}
            max={100}
            value={volume}
            onChange={handleChange}
            onChangeStart={handleChangeStart}
            onChangeComplete={handleChangeComplete}
/>