# Slider

*Category:* Components
*Section:* Interaction
*Source:* https://uikit.developers.rio.cloud/#/components/sliders
*Captured:* 2026-04-27T14:57:24.295Z

## Slider

### Example: Example 1

Standard Slider

Colored Slider

Slider with value label
17

Disabled Slider

Using the onCange callback

Large value labels and a hidden bar
50 %

#### React (tsx)

```tsx
import { useState } from 'react';

import Slider from '@rio-cloud/rio-uikit/Slider';
import Notification from '@rio-cloud/rio-uikit/Notification';

const SliderExample = () => {
    const [value1, setValue1] = useState(4);
    const [value2, setValue2] = useState(17);
    const [value3, setValue3] = useState(8);
    const [value4, setValue4] = useState(90);
    const [value5, setValue5] = useState(50);
    const [value6, setValue6] = useState(33);

    return (
        <div className='form-group'>
            <label>Standard Slider</label>
            <Slider
                className='margin-bottom-20'
                value={value1}
                minValue={0}
                maxValue={20}
                step={1}
                onDragEnd={value => {
                    Notification.info(`New value: ${value}`);
                    setValue1(value);
                }}
            />
            <label>Colored Slider</label>
            <Slider
                className='margin-bottom-20'
                value={value6}
                minValue={0}
                maxValue={50}
                step={1}
                color='danger'
                onDragEnd={value => {
                    Notification.info(`New value: ${value}`);
                    setValue6(value);
                }}
            />
            <label>Slider with value label</label>
            <Slider
                className='margin-bottom-20'
                value={value2}
                minValue={0}
                maxValue={20}
                step={1}
                valueLabels
                onDragEnd={value => {
                    Notification.info(`New value: ${value}`);
                    setValue2(value);
                }}
            />
            <label>Disabled Slider</label>
            <Slider
                className='margin-bottom-20'
                value={value3}
                minValue={0}
                maxValue={20}
                step={1}
                disabled
                onDragEnd={value => {
                    Notification.info(`New value: ${value}`);
                    setValue3(value);
                }}
            />
            <label>Using the onCange callback</label>
            <div className='display-flex align-items-center'>
                <Slider
                    value={value4}
                    minValue={-50}
                    maxValue={1000}
                    step={1}
                    onDragEnd={value => {
                        Notification.info(`New value: ${value}`);
                    }}
                    onChange={value => {
                        setValue4(value);
                    }}
                />
                <div className='width-100 margin-left-10'>
                    <input
                        className='form-control text-center no-controls'
                        type='number'
                        min={-50}
                        max={1000}
                        value={value4}
                        onChange={event => {
                            const newValue = !event.target.value ? 0 : Number.parseInt(event.target.value, 10);
                            setValue4(newValue);
                        }}
                    />
                </div>
            </div>
            <label>Large value labels and a hidden bar</label>
            <div className='display-flex justify-content-center padding-25 margin-top-25'>
                <Slider
                    className='max-width-300'
                    value={value5}
                    minValue={0}
                    maxValue={100}
                    step={25}
                    hideValueBar
                    largeValueLabels
                    valueLabels
                    valueLabelUnit='%'
                />
            </div>
        </div>
    );
};

export default SliderExample;
```

#### HTML (html)

```html
<div class="form-group">
    <label>Standard Slider</label>
    <div class="range-slider margin-bottom-20" style="color: var(--brand-primary);">
        <div class="range-whole-track">
        </div>
        <div class="range-track" style="width: 20%;">
        </div>
        <input class="" min="0" max="20" step="1" type="range" value="4">
    </div>
    <label>Colored Slider</label>
    <div class="range-slider margin-bottom-20" style="color: var(--brand-danger);">
        <div class="range-whole-track">
        </div>
        <div class="range-track" style="width: 66%;">
        </div>
        <input class="" min="0" max="50" step="1" type="range" value="33">
    </div>
    <label>Slider with value label</label>
    <div class="range-slider show-value-labels margin-bottom-20" style="color: var(--brand-primary);">
        <div class="range-whole-track">
        </div>
        <div class="range-track" style="width: 85%;">
            <div class="range-value">
                <span>17</span>
            </div>
        </div>
        <input class="" min="0" max="20" step="1" type="range" value="17">
    </div>
    <label>Disabled Slider</label>
    <div class="range-slider disabled margin-bottom-20" style="color: var(--brand-primary);">
        <div class="range-whole-track">
        </div>
        <div class="range-track" style="width: 40%;">
        </div>
        <input class="" min="0" max="20" step="1" type="range" value="8">
    </div>
    <label>Using the onCange callback</label>
    <div class="display-flex align-items-center">
        <div class="range-slider" style="color: var(--brand-primary);">
            <div class="range-whole-track">
            </div>
            <div class="range-track" style="width: 13.3333%;">
            </div>
            <input class="" min="-50" max="1000" step="1" type="range" value="90">
        </div>
        <div class="width-100 margin-left-10">
            <input class="form-control text-center no-controls" type="number" min="-50" max="1000" value="90">
        </div>
    </div>
    <label>Large value labels and a hidden bar</label>
    <div class="display-flex justify-content-center padding-25 margin-top-25">
        <div class="range-slider show-value-labels hide-value-bar large-value-labels max-width-300" style="color: var(--brand-primary);">
            <div class="range-whole-track">
            </div>
            <div class="range-track" style="width: 50%;">
                <div class="range-value">
                    <span>50 %</span>
                </div>
            </div>
            <input class="" min="0" max="100" step="25" type="range" value="50">
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | number | 0 | The current value. |
| minValue | number | 0 | The lower limit. |
| maxValue | number | Number.MAX_VALUE | The upper limit. |
| valueLabels | boolean | false | Whether to show the value labels. |
| valueLabelUnit | string \| React.ReactNode | — | Additional unit used for the slider value label. |
| hideValueBar | boolean | false | Whether to hide the dark-colored value bar. |
| largeValueLabels | boolean | false | Whether to show larger value labels instead of the normal ones. |
| step | number | 1 | Selector step value. |
| color | CurrentColor | 'primary' | Defines the color of the slider. Possible values are: 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |
| disabled | boolean | false | Disables all pointer events. |
| onChange | (newValue: number) => void | — | Callback to get the new value every time it changes. |
| onDragEnd | (newValue: number) => void | — | Callback to get the value after the slider ended dragging. |
| className | string | — | Additional classes to be set on the wrapper element. |

## RangeSlider

### Example: Example 2

Standard RangeSlider

RangeSlider with value labels
150 €
400 €

Disabled RangeSlider

#### React (tsx)

```tsx
import RangeSlider from '@rio-cloud/rio-uikit/RangeSlider';
import Notification from '@rio-cloud/rio-uikit/Notification';

export default () => (
    <div className='form-group'>
        <label>Standard RangeSlider</label>
        <RangeSlider
            className='margin-bottom-20'
            leftValue={-20}
            rightValue={800}
            minValue={-50}
            maxValue={1000}
            step={1}
            onDragEnd={(leftValue, rightValue) => {
                Notification.info(`Left Value: ${leftValue}, Right value: ${rightValue}`);
            }}
        />
        <label>RangeSlider with value labels</label>
        <RangeSlider
            className='margin-y-20'
            leftValue={150}
            rightValue={400}
            minValue={-50}
            maxValue={1000}
            valueLabels
            valueLabelUnit='€'
            step={2}
            onDragEnd={(leftValue, rightValue) => {
                Notification.info(`Left value: ${leftValue}, Right value: ${rightValue}`);
            }}
        />
        <label>Disabled RangeSlider</label>
        <RangeSlider
            className='margin-bottom-20'
            leftValue={-20}
            rightValue={800}
            minValue={-50}
            maxValue={1000}
            step={1}
            disabled
            onDragEnd={(leftValue, rightValue) => {
                Notification.info(`Left value: ${leftValue}, Right value: ${rightValue}`);
            }}
        />
    </div>
);
```

#### HTML (html)

```html
<div class="form-group">
    <label>Standard RangeSlider</label>
    <div class="range-slider margin-bottom-20" style="color: var(--brand-primary);">
        <div class="range-whole-track">
        </div>
        <div class="range-track" style="width: 78.0952%; left: 2.85714%;">
        </div>
        <input class="" min="-50" max="1000" step="1" type="range" value="-20" style="z-index: 5;">
        <input class="" min="-50" max="1000" step="1" type="range" value="800" style="z-index: 5;">
    </div>
    <label>RangeSlider with value labels</label>
    <div class="range-slider show-value-labels margin-y-20" style="color: var(--brand-primary);">
        <div class="range-whole-track">
        </div>
        <div class="range-track" style="width: 23.8095%; left: 19.0476%;">
            <div class="user-select-none">
                <div class="range-value">
                    <span>150 €</span>
                </div>
                <div class="range-value">
                    <span>400 €</span>
                </div>
            </div>
        </div>
        <input class="" min="-50" max="1000" step="2" type="range" value="150" style="z-index: 5;">
        <input class="" min="-50" max="1000" step="2" type="range" value="400" style="z-index: 5;">
    </div>
    <label>Disabled RangeSlider</label>
    <div class="range-slider disabled margin-bottom-20" style="color: var(--brand-primary);">
        <div class="range-whole-track">
        </div>
        <div class="range-track" style="width: 78.0952%; left: 2.85714%;">
        </div>
        <input class="" min="-50" max="1000" step="1" type="range" value="-20" style="z-index: 5;">
        <input class="" min="-50" max="1000" step="1" type="range" value="800" style="z-index: 5;">
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| leftValue | number | — | The current left value of the selected range. |
| rightValue | number | — | The current right value of the selected range. |
| minValue | number | 0 | The lower limit. |
| maxValue | number | Number.MAX_VALUE | The upper limit. |
| valueLabels | boolean | false | Whether to show the value labels. |
| valueLabelUnit | string \| React.ReactNode | — | Additional unit used for the slider value labels. |
| step | number | 1 | Selector step value. |
| color | CurrentColor | 'primary' | Defines the color of the slider. Possible values are: 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |
| disabled | boolean | false | Disables all pointer events. |
| onChange | (newLeftValue: number, newRightValue: number) => void | — | Callback to get the new value every time it changes. |
| onDragEnd | (newLeftValue: number, newRightValue: number) => void | — | Callback to get the value after the slider ended dragging. |
| className | string | — | Additional classes to be set on the wrapper element. |