Slider
A Slider widget wrapping the native <input type="range">
//<code-header>
fiddle.title = 'Slider';
//</code-header>
new Slider({
appendTo : targetElement,
width : 200
});const slider = new Slider({
text: 'Choose value'
});
//<code-header>
fiddle.title = 'Slider options';
//</code-header>
new Slider({
appendTo : targetElement,
width : 200
});
new Slider({
appendTo : targetElement,
width : 200,
showValue : 'thumb'
});
new Slider({
appendTo : targetElement,
width : 200,
showSteps : true,
step : 10,
showValue : 'thumb'
});
new Slider({
appendTo : targetElement,
text : 'Text + value',
width : 200
});
new Slider({
appendTo : targetElement,
text : 'Text',
showValue : false,
width : 200
});
new Slider({
appendTo : targetElement,
text : 'Tooltip',
showValue : false,
showTooltip : true,
width : 200
});Configs
89
Configs
89Common
Other
Maximum value
Minimum value
Show the step markers
Show the slider value in a tooltip
Show value in internal label (specify true), or in the thumb (specify 'thumb').
Step size
Text for the sliders internal label. Appends value if showValue is true
A config object for the tooltip to show while hovering the slider.
Unit to display next to the value, when configured with showValue : true
Initial value.
String value allows to link value by reference name.
Example:
new Slider({
text : 'Tick height',
value : 100,
}
new Slider({
text : 'Tick height',
value : 'up.tickSize',
}
Width of the value label when showValue is enabled. If a number is specified, px will be used.
When not specified, the width will be calculated based on the longest possible value string.
DOM
Float & align
Layout
Misc
Scrolling
Properties
76
Properties
76Class hierarchy
Other
Get input element.
Maximum value
Minimum value
Step size
Text for the sliders internal label. Appends value if showValue is true
Unit to display next to the value, when configured with showValue : true
Initial value.
String value allows to link value by reference name.
Example:
new Slider({
text : 'Tick height',
value : 100,
}
new Slider({
text : 'Tick height',
value : 'up.tickSize',
}
Width of the value label when showValue is enabled. If a number is specified, px will be used.
When not specified, the width will be calculated based on the longest possible value string.
CSS
DOM
Layout
Misc
Functions
58
Functions
58Configuration
Events
Misc
Other
Widget hierarchy
Events
16
Events
16Fired after the slider value changes (on mouse up following slider interaction).
// Adding a listener using the "on" method
slider.on('change', ({ value, userAction, source }) => {
});| Parameter | Type | Description |
|---|---|---|
value | Number | The value |
userAction | Boolean | Triggered by user taking an action ( |
source | Slider | The slider |
Fired while slider thumb is being dragged.
// Adding a listener using the "on" method
slider.on('input', ({ source, value }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Slider | The slider |
value | Number | The value |
Event handlers
16
Event handlers
16Called after the slider value changes (on mouse up following slider interaction).
new Slider({
onChange({ value, userAction, source }) {
}
});| Parameter | Type | Description |
|---|---|---|
value | Number | The value |
userAction | Boolean | Triggered by user taking an action ( |
source | Slider | The slider |
Called while slider thumb is being dragged.
new Slider({
onInput({ source, value }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Slider | The slider |
value | Number | The value |
Typedefs
6
Typedefs
6CSS variables
47
CSS variables
47| Name | Description |
|---|---|
--b-slider-thumb-size | Thumb size |
--b-slider-thumb-elevation | Thumb elevation (box-shadow) |
--b-slider-thumb-border | Thumb border |
--b-slider-track-height | Track height |
--b-slider-step-size | Step indicator size |
--b-slider-step-width | Step indicator width, overrides `--b-slider-step-size` if set |
--b-slider-step-height | Step indicator height, overrides `--b-slider-step-size` if set |
--b-slider-step-opacity | Step indicator opacity |
--b-slider-ring-content | Ring pseudo content (material) |
--b-slider-value-border-radius | Value display border-radius ("tooltip" docked after the slider) |
--b-slider-thumb-value-size | Thumb size when showing value in the thumb (`showValue: "thumb"`) |
--b-slider-thumb-text-color | Thumb text color (when showing value in the thumb) |
--b-slider-step-lesser-color | Color for lesser steps |
--b-slider-value-color | Text color for the value display ("tooltip" docked after the slider) |
--b-slider-track-color | Track color |
--b-slider-track-border | Track border |
--b-slider-step-border-radius | Step indicator border-radius |
--b-slider-color | Slider color |
--b-slider-value-background | Background for the value display ("tooltip" docked after the slider) |
--b-slider-thumb-color | Thumb color |
--b-slider-step-color | Slider step color |
| Disabled | |
--b-slider-disabled-color | Disabled color |
--b-slider-disabled-thumb-color | Thumb color when disabled |
--b-slider-disabled-track-color | Track color when disabled |
| Focused | |
--b-slider-thumb-focus-outline-offset | Focus outline offset for the thumb |
--b-slider-thumb-focus-outline-width | Focus outline width for the thumb |
--b-slider-thumb-focus-outline-color | Focus outline color for the thumb |