Hesoyam

Slider

Pick a number from a range when shape and proximity matter more than typing a precise value.

Default

Value is a number array. One thumb is [n]. v-model and value are both wired.

50

        

          1
          
          <Slider v-model="value" />

Label

A label plus the live value in tabular nums. Hide the live readout when start or end inputs are on.

40

        

          1
          
          <Slider v-model="volume" label="Volume" />

Range with inputs

Two thumbs. show-start-input and show-end-input add numeric fields that stay in range.


        

          1
          
          <Slider
        

          2
          
            v-model="range"
        

          3
          
            show-start-input
        

          4
          
            show-end-input
        

          5
          
          />

Disabled


        

          1
          
          <Slider
        

          2
          
            v-model="range"
        

          3
          
            disabled
        

          4
          
            show-start-input
        

          5
          
            show-end-input
        

          6
          
          />

Commit on release

value-change fires while dragging. value-committed fires when the pointer or keyboard gesture ends.

50

Last committed: —


        

          1
          
          <Slider
        

          2
          
            v-model="live"
        

          3
          
            label="Drag then release"
        

          4
          
            @value-committed="committed = $event[0] ?? null"
        

          5
          
          />

Step

Snap to a product increment. min and max should be real limits, not decorative ones.

40

        

          1
          
          <Slider
        

          2
          
            v-model="stepped"
        

          3
          
            label="Sample rate"
        

          4
          
            :min="20"
        

          5
          
            :max="100"
        

          6
          
            :step="5"
        

          7
          
          />

Best practices

  • Use a slider for ranged numbers where closeness matters: volume, opacity, bandwidth caps, color channels. Ports, memory limits, and IDs belong in an Input.
  • Always show the live value and name what it is. The track alone is not self-describing.
  • Snap with step so a drag never lands on 47.83291. Clamp min and max to real product bounds.
  • Pair the track with numeric inputs when the user may type. Keyboard users will.
  • Write expensive work on value-committed, not on every value-change.
  • Give the control a name through label or aria-label. Leave arrow keys, Page Up/Down, Home, and End to the slider.