Slider

Continuous

Slider with default setting: continuous with default min and max

<FormField id="continous-slider">
  <Slider
    value={this.state.value}
    onChange={(value)=>{
      this.setState({value})
    }}
    onInput={(inputValue)=>{
      this.setState({inputValue})
    }}
  />
</FormField>

Disabled

Use disabled property to disable slider

<FormField id="disabled-slider">
  <Slider
    value={this.state.value}
    disabled
  />
  />
</FormField>

Discrete Slider

Use the discrete and step to create a discrete slider.

<FormField id="discrete-slider">
  <Slider
    value={this.state.value}
    min={-50}
    max={50}
    step={5}
    discrete
    onChange={(value)=>{
      this.setState({value})
    }}
    onInput={(inputValue)=>{
      this.setState({inputValue})
    }}
  />
  />
</FormField>

Discrete Slider with Markers

Use showMarkers property to show markers for discrete slider

<FormField id="discrete-with-markers-slider">
  <Slider
    value={this.state.value}
    min={-50}
    max={50}
    step={5}
    discrete
    showMarkers
    onChange={(value)=>{
      this.setState({value})
    }}
    onInput={(inputValue)=>{
      this.setState({inputValue})
    }}
  />
  />
</FormField>