Skip to main content

Develop with FastTrack

Slider

The Slider enables users to select a numeric value within a range by clicking and dragging a handle along a horizontal line. A callback function can use that value to define a constraint for a MarkLogic search.

Slider example rendering

In this example, the Slider displays a draggable handle with a prefix (0), an input box, and a suffix (miles).

In this example, the Slider widget displays a draggable handle with a prefix (“0”), an input box, and a suffix (“miles”).

Slider example configuration

In this example, the Slider is configured to support a range from 0 to 100. An onChange event handler sets a state variable to the Slider value when the Slider changes:

function App() {
  
    const [sliderValue, setSliderValue] = useState(0);

  const handleChange = async (val) {
    setSliderValue(val)
    console.log('Slider changed to', val)
  }
  
  return (
    <div className="App">
      <Slider
        min={0}
        max={100}
  prefix={'0'}
    suffix={'miles'}
  defaultValue={0}
        onChange={handleChange}
      />
    </div>
  );
}
  
export default App;

Slider API

Prop	Type	Description
prefix	string	Optional string added to the left of the widget.
suffix	string	Optional string added to the right of the widget.
min	number	Minimum value of the Slider.
max	number	Maximum value of the Slider.
defaultValue	number	Default value of the Slider.
showInput	boolean	Indicates whether to show a numeric input box.
sliderSettings	Record<string, any>	Object of prop values passed to the KendoReact Slider.
inputSettings	Record<string, any>	Object of prop values passed to the KendoReact Numeric Text Box.
onChange	(sliderVal: number) => void	Callback function triggered when the Slider changes. Receives the numeric Slider value.

In this section: