Slider

Harmonium provides a simple slider with a data-binding input field. Data binding allows you to connect the slider to an external input field. With data binding set up, dragging the handle will change the value inside the text field, and editing the number in the text field will move the slider in real-time.

expand

Variables:

Variable NameDefault ValueDescription
Input Vars
Var: $slider-heightDefault Value: 40pxDescription: Default height for slider component container.
Var: $slider-track-heightDefault Value: 3pxDescription: Default height for slider track.
Var: $slider-track-padding-rightDefault Value: $global-paddingDescription: Default right-padding for the slider.
Var: $slider-track-colorDefault Value: $light-grayDescription: Default color for the slider track.
Var: $slider-input-heightDefault Value: 25pxDescription: Default height for text input.
Var: $slider-input-widthDefault Value: 80pxDescription: Default width for text input.
Var: $slider-input-marginDefault Value: 80pxDescription: Default margin for text input.
Var: $slider-thumb-widthDefault Value: 16pxDescription: Default width for the slider thumb.
Var: $slider-thumb-heightDefault Value: 16pxDescription: Default height for the slider thumb.
Var: $slider-thumb-border-radiusDefault Value: 50%Description: Default border radius for the slider thumb.
Var: $slider-thumb-backgroundDefault Value: $primaryDescription: Default background color for the slider thumb.
Var: $slider-progress-colorDefault Value: $primaryDescription: Default background color of the slider progress bar.

Properties:

NameTypeDefaultDescription
Input Props
Name: initialValueType: numberDefault:25Description: The starting value of the slider.
Name: minType: numberDefault:0Description: The minimum value of the range slider.
Name: maxType: numberDefault:100Description: The maximum value of the range slider.
Name: nameType: stringDefault:sliderDescription: The name attribute for the text input field.