Slider
- Last Updated: May 5, 2026
- 2 minute read
- MarkLogic Server
- Documentation
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).
 |
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. |