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.

<div>
  <Slider
    initialValue={25}
    min={0}
    max={100}
    step={1}
    name='slider' 
  />
</div>

<div>
  <Slider
    initialValue={25}
    min={0}
    max={100}
    step={1}
    name='slider' 
  />
</div>

Variables:

Variable Name	Default Value	Description
Input Vars
Var: `$slider-height`	Default Value: `40px`	Description: Default height for slider component container.
Var: `$slider-track-height`	Default Value: `3px`	Description: Default height for slider track.
Var: `$slider-track-padding-right`	Default Value: `$padding-base`	Description: Default right-padding for the slider.
Var: `$slider-track-color`	Default Value: `$color-light-gray`	Description: Default color for the slider track.
Var: `$slider-input-height`	Default Value: `25px`	Description: Default height for text input.
Var: `$slider-input-width`	Default Value: `80px`	Description: Default width for text input.
Var: `$slider-input-margin`	Default Value: `80px`	Description: Default margin for text input.
Var: `$slider-thumb-width`	Default Value: `16px`	Description: Default width for the slider thumb.
Var: `$slider-thumb-height`	Default Value: `16px`	Description: Default height for the slider thumb.
Var: `$slider-thumb-border-radius`	Default Value: `50%`	Description: Default border radius for the slider thumb.
Var: `$slider-thumb-background`	Default Value: `$color-ui-primary`	Description: Default background color for the slider thumb.
Var: `$slider-progress-color`	Default Value: `$color-ui-primary`	Description: Default background color of the slider progress bar.

Properties:

Name	Type	Default	Description
Input Props
Name: `initialValue`	Type: number	Default 25	Description: The starting value of the slider.
Name: `min`	Type: number	Default 0	Description: The minimum value of the range slider.
Name: `max`	Type: number	Default 100	Description: The maximum value of the range slider.
Name: `step`	Type: number	Default 1	Description: The interval to increment or decrement the slider
Name: `name`	Type: string	Default slider	Description: The name attribute for the text input field.