Slider
Slider is a form element with which users can set a value by dragging a cursor along a bar. It uses a knob or lever moved horizontally to control a variable, such as volume on a radio or brightness on a screen.
Continuous slider
Continuous slider allow users to select a value along a subjective range.
The default slider has a minimum value of 0, a maximum value of 100, a step value of 1 and a handle value of 0.
<qtm-slider></qtm-slider>
<qtm-slider min="0" max="100" step="1" value="0"></qtm-slider>
Sizes
The slider is available in three sizes to cater for the diverse range of use cases and devices that our business uses. By default the slider is medium.
<qtm-slider size="small" value="50"></qtm-slider>
<qtm-slider size="medium" value="50"></qtm-slider>
<qtm-slider size="large" value="50"></qtm-slider>
Colors
By default, the sliders is emphasized (primary theme). Providing a visual prominence. For visual components where you don’t want to emphasize the slider component, the neutral theme is more appropriate for this deprioritization its focus on the screen.
<qtm-slider color="primary" value="50"></qtm-slider>
<qtm-slider color="neutral" value="50"></qtm-slider>
Disabled
<qtm-slider color="primary" disabled value="50"></qtm-slider>
<qtm-slider color="neutral" disabled value="50"></qtm-slider>
Label, Caption and Metric
The slider can have a label a caption and a metric label respectively with attributes label caption and has-metric
<qtm-slider label="Label" caption="Caption" value="50" hasMetric></qtm-slider>
Discrete slider
Discrete slider can be adjusted to a specific value by referencing its value indicator. You can generate a mark for each step with marks=.
<qtm-slider marks has-metric value="50" step="10"></qtm-slider>
Small steps
You can change the default step increment.
<qtm-slider
marks
step="0.00000001"
min="-0.00000005"
max="0.0000001"
has-metric
></qtm-slider>
Custom marks
You can restrict the marks to those provided with the marks prop.
A mark object passed through the marks prop must have a value. It can be visible or invisble. It can be main one or secondary one. And it can be with or without a legend label.
<script>
const marks = [
{
value:0,
label:"0°C",
main: true,
visible: true
},
{
value:10,
label:"10°C",
},
{
value:50,
label:"50°C",
main: true,
},
{
value: 90,
label:"90°C",
},
{
value:100,
label:"100°C",
main: true,
},
]
<script>
<qtm-slider marks="marks" has-metric value="50"></qtm-slider>
Restricted values
You can restrict the selectable values to those provided with the marks prop with step=.
<script>
const marks = [
{
value:0,
label:"0°C",
},
{
value:10,
label:"10°C",
},
{
value:50,
label:"50°C",
},
{
value: 90,
label:"90°C",
},
{
value:100,
label:"100°C",
},
]
<script>
<qtm-slider marks="marks" step="null" has-metric value="50"></qtm-slider>
Legend Position
You can put the mark labels on top or bottom with the legend-position
property.
<qtm-slider
marks="marks"
has-metric
value="50"
legend-position="top"
></qtm-slider>
Two Handles
The slider can be used to set the start and end of a slider range by supplying an array of values to the value prop.
<script>
const value = [10, 50]
<script>
<qtm-slider value="value" has-metric></qtm-slider>
With marks
<script>
value=[10, 20]
<script>
<qtm-slider value="value" has-metric marks step="10"></qtm-slider>
API
qtm-slider
Property | Type | Default | Description |
---|---|---|---|
anchorPoint | number | The starting value of the slider having one handle. By default, the anchor point value is equal to the min value of slider. | |
caption | string | '' | Slider caption |
color | "neutral" | "primary" | 'primary' | Set slider color |
disabled | boolean | false | If true, the component is disabled. |
formatMetric | (value: SliderValue) => string | null | Function to format the slider metric. |
hasMetric | boolean | false | If true, the component has a metric to display its current value. |
label | string | '' | Slider label |
legendPosition | "bottom" | "top" | 'bottom' | Position of sliders legends with relation to sliders range. Can be on top or bottom of the slider |
marks | IMarkProp[] | boolean | If true the marks are auto generated and displayed for each step. An array of marks can also be passed as parameter to generate custom marks. If step prop is null, it indicates where slider can move on. | |
max | number | 100 | The maximum allowed value of the slider. Should not be equal to min. |
min | number | 0 | The minimum allowed value of the slider. Should not be equal to max. |
size | "large" | "medium" | "small" | 'medium' | The size of the slider |
step | number | 1 | The granularity with which the slider can step through values. (A "discrete" slider.) The min prop serves as the origin for the valid values. When step is null, the handle can only be slid onto marks provided with the marks prop. |
value | number | number[] | 0 | The value of the slide. The value has type number, that means the slider has one handle. When the value has a range [minValue, maxValue], that means the slider has two handles |
Event | Type | Description |
---|---|---|
valueChanged | CustomEvent<number | number[]> | Callback fired when a handle is moved or when slider range is clicked. function(event: object) => void You can pull out the collapsed state by accessing event.detail ( number| number[]) |