Slider
Sliders are used to allow users to select a value from a range by dragging a handle along a track.
Last updated
Sliders are used to allow users to select a value from a range by dragging a handle along a track.
Last updated
Sliders are used in interfaces where users need to select a value or range within a defined limit. They are ideal for adjustable settings like volume control, brightness, price ranges, or any interactive element requiring a range input.
A slider component consists of a track and a draggable handle that users can move to select a specific value, which is visually indicated along the track. Sliders can be customized to display labels in various positions and to show different value ranges, providing flexibility in presentation and functionality.
component_mode
Defines the mode of the component (e.g., dark, light). Used to apply specific styles or behaviors based on the mode.
string
custom_class
A custom CSS class that can be added to the component for additional styling or theming.
string
min
The minimum value of the range slider. Defaults to 0.
number
max
The maximum value of the range slider. Defaults to 100.
number
step
The increment step between each value in the range slider. Defaults to 1.
number
initial_min
The initial minimum value when the component is first rendered. Defaults to 0.
number
initial_max
The initial maximum value when the component is first rendered. Defaults to 100.
number
size
Specifies the size of the range slider (e.g., small, medium, large). This prop can be used for custom styling
string
tooltip_position
Specifies the position of the tooltip relative to the range slider (e.g., top, bottom, left, right). Used to position the tooltip on the slider
string
left_input_id
The unique identifier for the left (min) input element. This ID is used for the label’s htmlFor attribute and can be useful for accessibility.
string
right_input_id
The unique identifier for the right (max) input element. This ID is used for the label’s htmlFor attribute and can be useful for accessibility.
string
left_aria_label
The ARIA label for the left (min) input element. Provides an accessible description for screen readers.
string
right_aria_label
The ARIA label for the right (max) input element. Provides an accessible description for screen readers.
string
Handles: These are interactive elements that users can drag along the slider's track to adjust the values.
Track: This is the line that represents the range of values available on the slider, guiding the movement of the handles.
Tooltip: This displays the selected value directly above the handle, providing real-time feedback as the handle is adjusted.
Percentage Label: Indicates the current selected value in percentage form, offering a clear visual reference for the slider's position on the scale.
Use sliders for selecting values within a range.
Don't use sliders for selecting discrete, non-sequential values.
Label the slider clearly to indicate its purpose.
Avoid using ambiguous or unclear labels for sliders.
Ensure the slider is large enough to be easily draggable.
Don't make the slider handle too small to interact with comfortably.
Provide visual feedback to indicate the selected value.
Don't leave users guessing about the current value.
Use consistent styling and spacing across all sliders in the application.
Don't use inconsistent styles that may confuse users.
Update the slider in real-time as the handle is dragged.
Don't use sliders if you cannot provide real-time updates.
