Wildeye Design System
CtrlK
Home page

Slider

Sets a value on a continuous range, for thresholds that are judged rather than typed.

Refined portVue source: WildSlider.vueStorybook story: Forms/SliderReact component: WSlider

Try it

Drag the handle, or tab to it and use the arrow keys, Home or End.

35%
Size
Colour
Value badge
Ticks
Disabled
<WildSlider
  v-model="threshold"
  label="Refill threshold"
  :min="0"
  :max="100"
  :step="1"
  size="md"
  color="blue"
  show-value
  :format-value="(n) => `${n}%`"
/>

When to use

  • Use a slider for a value that’s judged rather than typed, such as a refill threshold set by where the line usually sits.
  • Turn on ticks only where the value is stepped.
  • Keep it blue. Green, amber and red already mean state in this product.
Don’t use it
  • For a figure read off a datasheet, such as a calibration offset. Use a numeric input.

Anatomy

A label and an optional value badge, the track and its fill, and the handle. With ticks on, the min and max sit underneath.

30%
30%
<WildSlider v-model="v" />
<WildSlider v-model="v" label="Refill threshold" show-value />
<WildSlider v-model="v" label="Refill threshold" show-value show-ticks :step="10" />

Sizes

Tracks of 4, 6 and 8px, with 16, 20 and 24px handles. The default is md.

25
50
75
<WildSlider v-model="v" size="sm" />
<WildSlider v-model="v" size="md" />
<WildSlider v-model="v" size="lg" />
Below 640px wide, md takes the lg track and handle, for touch.

Ticks

Up to 11 marks, each on a value the handle can stop on. Ticks bring the min and max labels with them.

50
7
<WildSlider v-model="v" :min="0" :max="100" :step="10" show-ticks />
<WildSlider v-model="v" :min="1" :max="10" :step="1" show-ticks />

Colour

Five fills. Each one colours the handle’s ring and its focus ring too.

62
62
62
62
62

States

Hover and focus lift the handle, and focus adds a ring. Disabled greys the fill but keeps the value readable.

30
70
<WildSlider v-model="v" label="Normal" show-value />
<WildSlider v-model="v" label="Locked setting" show-value disabled />

Accessibility

It’s a native range input, named by label or ariaLabel, and it announces the formatted value. The pointer target is 24px tall at every size.

KeyWhat it does
TabMoves focus to the handle.
← / ↓Steps down by one step.
→ / ↑Steps up by one step.
Home / EndJumps to the min or the max.
Page Up / Page DownMoves by a larger stride.

Props

PropTypeDefaultDescription
value / defaultValuenumber0The value, controlled or uncontrolled.
onChange(value: number) => void—Fires throughout a drag, not only on release.
min / maxnumber0 / 100The range.
stepnumber1Increment, and the arrow-key stride.
size'sm' | 'md' | 'lg''md'Track 4, 6 or 8px; handle 16, 20 or 24px.
color'blue' | 'green' | 'orange' | 'red' | 'purple''blue'Fill, handle ring and focus ring.
disabledbooleanfalseGreys it out; blocks pointer and keyboard.
showValuebooleanfalseThe value badge in the header.
showTicksbooleanfalseStep marks, plus the min and max labels.
labelstring—Header text. Also names the slider.
formatValue(value: number) => string—Formats the badge and the spoken value.
ariaLabelstring—Accessible name when there is no label.

Tokens

TokenValueWhere it lands
--global-blue-1000#1877F2Fill, handle ring and focus ring, blue. 3.59:1 on the track.
--global-green-900#018030Green.
--global-squash-900#C47E0AOrange.
--global-red-800#E12121Red.
--global-purple-900#7B238DPurple.
--global-neutral-grey-400#ECECEDThe unfilled track.
--global-neutral-grey-900#7F7D83Ticks on the track. White on the fill.
--global-neutral-grey-200 / -1000#F5F5F5 / #4F4D55Value badge ground and ink.
--global-neutral-grey-1100#2D2B32The label.
(no token)#4F4D55Min and max labels.
--global-neutral-grey-300 / -800#F1F1F1 / #ADACB0Disabled track; disabled fill and ring.
--global-neutral-grey-700#C9C9CCThe label when disabled.
(no token)0 2px 4px rgba(10,9,11,.1)Handle shadow. Hover deepens it.
(no token)2px gap, 2px ringKeyboard focus, around the handle.
(no token)0.15s easeHandle lift and shadow.