Sliders
Speed Slider
This component is used to create a range input for controlling the current playback rate.
API Reference
Section titled API ReferenceRoot
Section titled RootHTMLAttributes
Ref<SpeedSliderInstance>
Versatile and user-friendly input playback rate control designed for seamless cross-browser and provider compatibility and accessibility with ARIA support. It offers a smooth user experience for both mouse and touch interactions and is highly customizable in terms of styling.
Props
Section titled PropsState
Section titled StateCallbacks
Section titled CallbacksInstance
Section titled InstanceCSS Variables
Section titled CSS VariablesData Attributes
Section titled Data AttributesThumb
Section titled ThumbRefAttributes
Ref<HTMLElement>
Purely visual element used to display a draggable handle to the user for adjusting the value on the slider component.
Props
Section titled PropsTrack
Section titled TrackRefAttributes
Ref<HTMLElement>
Visual element inside the slider that serves as a horizontal or vertical bar, providing a visual reference for the range or values that can be selected by moving the slider thumb along it. Users can interact with the slider by dragging the thumb along the track to set a specific value.
Props
Section titled PropsTrackFill
Section titled TrackFillRefAttributes
Ref<HTMLElement>
Portion of the slider track that is visually filled or highlighted to indicate the selected or currently chosen range or value. As the slider thumb is moved along the track, the track fill dynamically adjusts to visually represent the portion of the track that corresponds to the selected value or range, providing users with a clear visual indication of their selection.
Props
Section titled PropsPreview
Section titled PreviewHTMLAttributes
Ref<HTMLElement>
Used to provide users with a real-time or interactive preview of the value or selection they are making as they move the slider thumb. This can include displaying the current pointer value numerically, or displaying a thumbnail over the time slider.
Props
Section titled PropsData Attributes
Section titled Data AttributesValue
Section titled ValueHTMLAttributes
Ref<HTMLElement>
Displays the specific numeric representation of the current or pointer value of the slider. When a user interacts with a slider by moving its thumb along the track, the slider value changes accordingly.
Props
Section titled PropsSteps
Section titled StepsRefAttributes
Ref<HTMLElement>
Visual markers that can be used to indicate value steps on the slider track.