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.

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: $padding-baseDescription: Default right-padding for the slider.
Var: $slider-track-colorDefault Value: $color-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: $color-ui-primaryDescription: Default background color for the slider thumb.
Var: $slider-progress-colorDefault Value: $color-ui-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: stepType: numberDefault 1Description: The interval to increment or decrement the slider
Name: nameType: stringDefault sliderDescription: The name attribute for the text input field.