--- tags: specs --- # Slider Component Overview ## Basics A slider is a way of selecting an individual or range of values along a range of possible values. It consists of one or two thumbs which can be dragged along a track to indicate the selected value or range of values. Some sliders support labeled marks to indicate individual values that can be selected. ## Use Cases * Selecting an individual value within a range of possible values. * Selecting a range of values within a range of possible values. * Since Slider is an input, it should be usable within a form. * Selecting an enum/string value within a list of possible values. * This should likely be a specialized HoC that wraps the basic slider with logic that handles strings rather than part of the default slider. ## Non-goals * Graph like behavior, or being able to use as coordinate system. ## Features * min-max value specifying where the selectable range begins and ends. * Can be horizontal or vertical * Inclusive or singular selection. * Inclusive selection can start at the min, max, or some arbitrary value. * Marks of certain values on the slide. * Step amount, how much each move of the thumb increases the value. IE if the step value is 5, then moving the thumb increases or decreases the current value by 5 * Track origin, where the track appears to originate from, typically min or max ## Behaviors * Snapping / Discrete * Not all sliders are continuous. Some have explicit marks that indicate the only selectable values. As you move the slider it will snap to the only available value. * Mobile * Should work exactly as it does on the web, touching the thumb gives the user the ability to move the thumb to increase or decrease the value. * Most of the interaction with the slider is via the mouse but it is important to allow keyboard interaction for users that might be unable to use a mouse. * If each thumb is selectable, then the interaction model for keyboard is fairly simple. The thumb, when focused can be moved up or down using the appropriate arrow key. If only the entire slider is focusable, then the interaction model is harder since the user will need a way to specify which slider is moving when the arrow key is pressed.