Vanilla UI Kit Slider v1.0.0 · tabs →

Sliders, one file.

Single or dual thumb, marks, tooltips, vertical, and real form participation — zero dependencies, full keyboard and screen-reader support. Drag anything below.

Basic

Drag the thumb, or press the track to jump. Arrow keys work too.

40%

new Slider('#basic', {
  value: 40, suffix: '%',
  onInput: v => show(v)
})

Price range

Dual thumb with $ formatting and always-on bubbles. Thumbs clamp at each other.

$200 – $650

new Slider('#price', {
  min: 0, max: 1000, step: 10,
  value: [200, 650],
  prefix: '$', tooltip: 'always'
})

Steps + marks

Snaps to the step grid; labeled marks under the rail.

16 GB

new Slider('#ram', {
  min: 0, max: 64, step: 16, value: 16,
  marks: { 0:'0', 16:'16', 32:'32', 48:'48', 64:'64 GB' },
  format: v => v + ' GB'
})

Vertical

vertical: true — bottom to top; ArrowUp still increases.

vol 65 · 20°C

new Slider('#vol',  { value: 65, vertical: true })
new Slider('#temp', { min: -10, max: 40, value: 20,
  vertical: true, suffix: '°C', tooltip: 'always' })

Replace a native range

The <input> is hidden and kept synced — submit posts real values (dual adds budget[] hidden inputs).

— submit to see the payload —

new Slider(document.getElementById('native-volume'))
new Slider('#budget', { name: 'budget', prefix: '$',
  max: 500, value: [100, 350] })

Disabled

disabled: true, toggled live via enable()/disable().

var s = new Slider('#locked',
  { value: 70, disabled: true })
s.enable(); s.disable()