Slider
Widget

A range slider widget wrapping the native <input type="range">. It lets users select a numeric value by dragging a thumb along a track. Configure the range with min, max, and step. The current value can be displayed in the label, the thumb, or in a tooltip. Optional step markers can be shown along the track using showSteps.

const slider = new Slider({
    text      : 'Opacity',
    min       : 0,
    max       : 100,
    step      : 10,
    value     : 50,
    showValue : true,
    appendTo  : document.body
});

// Listen for value changes
slider.on('input', ({ value }) => {
    console.log('New value:', value);
});

Useful configs, properties, and events

Config / Event	Description
min	Minimum value (default 0)
max	Maximum value (default 100)
step	Step increment between values
value	Current slider value
text	Label text; appends current value if `showValue` is `true`
showValue	Show value in label (`true`) or in the thumb (`'thumb'`)
showTooltip	Show the current value in a tooltip on hover/drag
showSteps	Show tick marks at each step interval
input	Fired on each value change as the thumb is dragged
change	Fired when the value changes after the thumb is released

Configs

Configs are options you supply in a configuration object when creating an instance of this class

max : Number100

Maximum value

Has a corresponding runtime max property.
min : Number0

Minimum value

Has a corresponding runtime min property.
showSteps : Booleanfalse

Show the step markers
showTooltip : Booleanfalse

Show the slider value in a tooltip
showValue : Boolean/'thumb'true

Show value in internal label (specify true), or in the thumb (specify 'thumb').
step : Number1

Step size

Has a corresponding runtime step property.
text : String

Text for the sliders internal label. Appends value if showValue is true

Has a corresponding runtime text property.
thumbIcon : String

Icon to show in the thumb. By default, no icon is shown.

Has a corresponding runtime thumbIcon property.
tooltip : TooltipConfig

A config object for the tooltip to show while hovering the slider.
triggerChangeOnInput : Boolean

By default, the change event is fired when a change gesture is completed, ie: on the mouse up gesture of a drag.

Configure this as true to fire the change event as the value changes during a drag.

Has a corresponding runtime triggerChangeOnInput property.
unit : String

Unit to display next to the value, when configured with showValue : true

Has a corresponding runtime unit property.

value : Number/String

Initial value. String value allows linking value by reference name.

Example:

new Slider({
    text      : 'Tick height',
    value     : 100,
}

new Slider({
    text      : 'Tick height',
    value     : 'up.tickSize',
}

Has a corresponding runtime value property.

valueLabelWidth : String/Number

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.

Has a corresponding runtime valueLabelWidth property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isSlider : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of Slider class, or subclass thereof.

input : HTMLInputElement

READONLY

Get input element.
max : Number100

Maximum value

Has a corresponding max config.
min : Number0

Minimum value

Has a corresponding min config.
step : Number1

Step size

Has a corresponding step config.
text : String

Text for the sliders internal label. Appends value if showValue is true

Has a corresponding text config.
thumbIcon : String

Icon to show in the thumb. By default, no icon is shown.

Has a corresponding thumbIcon config.
triggerChangeOnInput : Boolean

By default, the change event is fired when a change gesture is completed, ie: on the mouse up gesture of a drag.

Configure this as true to fire the change event as the value changes during a drag.

Has a corresponding triggerChangeOnInput config.
unit : String

Unit to display next to the value, when configured with showValue : true

Has a corresponding unit config.

value : Number/String

Initial value. String value allows linking value by reference name.

Example:

new Slider({
    text      : 'Tick height',
    value     : 100,
}

new Slider({
    text      : 'Tick height',
    value     : 'up.tickSize',
}

Has a corresponding value config.

valueLabelWidth : String/Number

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.

Has a corresponding valueLabelWidth config.
isSlider : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of Slider class, or subclass thereof.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

change

Fired after the slider value changes (on mouse up following slider interaction).
input

Fired while slider thumb is being dragged.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onChange

Called after the slider value changes (on mouse up following slider interaction).
onInput

Called while slider thumb is being dragged.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-slider-color	Slider color
--b-slider-ring-content	Ring pseudo content (material)
--b-slider-step-border-radius	Step indicator border-radius
--b-slider-step-color	Slider step color
--b-slider-step-height	Step indicator height, overrides `--b-slider-step-size` if set
--b-slider-step-lesser-color	Color for lesser steps
--b-slider-step-opacity	Step indicator opacity
--b-slider-step-size	Step indicator size
--b-slider-step-width	Step indicator width, overrides `--b-slider-step-size` if set
--b-slider-thumb-border	Thumb border
--b-slider-thumb-color	Thumb color
--b-slider-thumb-elevation	Thumb elevation (box-shadow)
--b-slider-thumb-size	Thumb size
--b-slider-thumb-text-color	Thumb text color (when showing value or icon in the thumb)
--b-slider-thumb-value-size	Thumb size when showing value in the thumb (`showValue: "thumb"`)
--b-slider-track-border	Track border
--b-slider-track-color	Track color
--b-slider-track-height	Track height
--b-slider-value-background	Background for the value display ("tooltip" docked after the slider)
--b-slider-value-border-radius	Value display border-radius ("tooltip" docked after the slider)
--b-slider-value-color	Text color for the value display ("tooltip" docked after the slider)
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-color	Focus outline color for the thumb
--b-slider-thumb-focus-outline-offset	Focus outline offset for the thumb
--b-slider-thumb-focus-outline-width	Focus outline width for the thumb

Slider
Widget

Useful configs, properties, and events

See also

Configs

Properties

Events

Event handlers

CSS variables

Source path

Inheritance tree3

Mixins6

Contents

Slider Widget

Useful configs, properties, and events

See also

Configs

Properties

Events

Event handlers

CSS variables

Source path

Inheritance tree3

Mixins6

Contents

Slider
Widget