Slider
Sliders let the user set a numeric value from a range by sliding a knob with the mouse. This is typically represented using a slider or dial control rather than a numeric input element. Sliders are not generally used for precise numbers, or in situations where the user cares about the exact number. The goal is instead to allow uses to dynamically update their input until they are satisfied, often by seing the results directly. An example of use is to adjust brightness on a page.
Basic Usage
<triton-slider></triton-slider>
<TritonSlider/>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-slider></triton-slider>
</body>
</html>
Variants
The TritonSlider's default mode allows users to slide a one step slider, as shown in the Basic Example above.
Range
<triton-slider range value="50" min-label="MIN" max-label="MAX"></triton-slider>
Behavior
Min and Max
By default the slider lets users slide between the values 0 and 100. Use the respective properties to set a different min and max.
<triton-slider min="-500" max="500" value="200"></triton-slider>
Step
How much the slider value changes at a time can be set by using the step property.
<triton-slider step="0.1" value="10"></triton-slider>
Appearance
Labels
Set the labels on either side of the slider by using the min-label and max-label properties.
<triton-slider min-label="MIN" max-label="MAX"></triton-slider>
Vertical
The slider can be set to vertical instead of the default horizontal by using the orientation property.
<triton-slider value="20" orientation="vertical"></triton-slider>
Icons
The Slider uses the standard Triton icon-leading and icon-trailing properties to set icons.
<triton-slider value="20" icon-leading="cog"></triton-slider>
<triton-slider value="20" icon-trailing="cog"></triton-slider>
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
disabled | If true, the component will look disabled and not be interactable | boolean | false |
icon-leading | Display icon on the left side of the slider | Icon | - |
icon-trailing | Display icon on the right side of the slider | Icon | - |
label | The label displayed for the field | string | - |
max | The maximum value the input can have. max can not be less than the value of the min attribute | number | 100 |
max-label | At default the max number will render, if this is empty, if set to false no label will render | boolean string | - |
min | The minimum value the input can have. min can not be greater than the value of the max attribute | number | 0 |
min-label | At default the min number will render, if this is empty, if set to false no label will render | boolean string | - |
orientation | Set the orientation of the slider. If set to vertical the slider will render downwards | horizontal vertical | 'horizontal' |
range | If true the user can select a range from A to B in the slider, instead of selecting only a single point | boolean | false |
step | Set how much the value changes when the user uses up or down arrows to increment it.Possible values are any or a positive floating point number | number | 10 |
value | The value of the slider | [number,number] number | - |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atBlur | CustomEvent<void> | Emitted when the slider loses focus. | - |
| atChange | CustomEvent<[number, number] \| number> | Emitted when the value has changed. | - |
| atFocus | CustomEvent<void> | Emitted when the slider gains focus. | - |
| atInput | CustomEvent<KeyboardEvent> | Emitted when a mouse input occurs. | - |