1. UI
  2. Slider Value Text

UI

Slider Value Text

This component is used to display the current value of a slider in various formats such as a raw value, percentage, or time.

Import

tsx
        import { SliderValueText } from '@vidstack/player-react';

      

Usage

The <SliderValueText> component displays the current value of a parent slider, or the value at the device pointer (e.g., the position at which the user is hovering their mouse over the slider).

The value can be displayed as a:

  • value (e.g., 70),
  • percent: uses the slider's current and max value (e.g., 70%),
  • time: uses the slider's current value, assuming seconds (e.g., value of 70 = 1:10).
          
        

The <SliderValueText> component can be combined with the <TimeSlider> to display the current time as the user hovers over the scrubber:

          
        

Or, with the <VolumeSlider> to display the current volume:

          
        

Styling

In the following example, we add a small tooltip that displays the current time the user is hovering over above the slider: