Develop with FastTrack

Slider

Save PDF

Slider

Save PDF

Last Updated: May 5, 2026
1 minute read

MarkLogic Server
Documentation

The Slider widget displays a range slider for selecting numeric values. An optional numeric input field can be displayed alongside the slider. The widget is based on the KendoReact Slider component.

Example configuration

In this example, the Slider widget is configured with a dollar sign prefix, a numeric input field, and a range of 0 to 100.

import { Slider } from "ml-fasttrack";

function App() {

  const handleChange = (value) => {
    console.log('Slider value:', value);
  };

  return (
    <div>
      <Slider
        onChange={handleChange}
        prefix="quot;
        showInput={true}
        SliderProps={{ min: 0, max: 100 }}
      />
    </div>
  );
}

export default App;

API

Prop	Type	Description
onChange	((sliderVal: number) => void)	Callback function triggered when the slider value changes. Receives the updated slider value.
min	number	The minimum value of the slider. Default: `0`. Deprecated since v2.0.0. Use `SliderProps.min` or `NumericTextBoxProps.min` instead.
max	number	The maximum value of the slider. Default: `100`. Deprecated since v2.0.0. Use `SliderProps.max` or `NumericTextBoxProps.max` instead.
defaultValue	number	The default value of the slider. Default: `0`. Deprecated since v2.0.0. Use `SliderProps.defaultValue` instead.
prefix	string	Optional prefix displayed before the slider value.
suffix	string	Optional suffix displayed after the slider value.
showInput	boolean	Indicates whether to display a numeric input field alongside the slider. Default: `false`
SliderProps	SliderProps	KendoReact Slider props for the slider component.
NumericTextBoxProps	NumericTextBoxProps	KendoReact NumericTextBox props for the numeric input field.