@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/sliders.md

@@ -0,0 +1,376 @@
+# Slider
+
+*Category:* Components
+*Section:* Interaction
+*Source:* https://uikit.developers.rio.cloud/#components/sliders
+*Captured:* 2025-12-12T12:38:18.542Z
+
+## 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 %
+
+#### Summary
+
+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. |
+| largeValueLabels | Boolean | false | Whether to show larger value labels instead of the normal ones. |
+| valueLabelUnit | String | — | Additional unit used for the slider value label. |
+| hideValueBar | Boolean | false | Whether to hide the dark-colored value bar. |
+| step | Number | 1 | Selector step value. |
+| color | String | 'primary' | Defines the color of the slider. Possible values are:'primary', 'secondary', 'info', 'success', 'warning' or 'danger'. |
+| 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
+
+#### Summary
+
+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 | — | Additional unit used for the slider value label. |
+| step | Number | 1 | Selector step value. |
+| color | String | 'primary' | Defines the color of the slider. Possible values are:'primary', 'secondary', 'info', 'success', 'warning' or 'danger'. |
+| disabled | Boolean | false | Disables all pointer-events. |
+| onChange | (newLeft: number, newRight: number) => void | () => {} | Callback to get the new value every time it changes. |
+| onDragEnd | (newLeft: number, newRight: number) => void | () => {} | Callback to get the value after the slider ended dragging. |
+| className | String | — | Additional classes to be set on the wrapper element. |