slider

Styled range input with label, hint, and a CSS-driven fill gradient that tracks the thumb live as you drag.

Basic

Volume 50

slider({ name: 'volume', label: 'Volume', showValue: true })

Min, max, step, and hint

Brightness 100

Adjust display brightness (0–200)

slider({
  name:      'brightness',
  label:     'Brightness',
  min:       0,
  max:       200,
  step:      10,
  value:     100,
  showValue: true,
  hint:      'Adjust display brightness (0–200)',
})

Live value in state

Use data-event="change:mutationName" to capture the value when the user releases the handle. The fill gradient always updates live — no mutation needed for that.

Brightness 100

// state
{ brightness: 100 }

// mutation
setBrightness: (state, e) => ({ brightness: Number(e.target.value) })

// view
slider({
  name:      'brightness',
  label:     'Brightness',
  min:       0,
  max:       200,
  step:      10,
  value:     state.brightness,
  showValue: true,
  event:     'change:setBrightness',
})

Disabled

Opacity

slider({ name: 'opacity', label: 'Opacity', value: 30, disabled: true })

The fill gradient updates live during drag automatically. To read the final value, either use data-event="change:mutationName" on the slider or submit it as part of a form — the value is available in FormData as a number string under name.

Do not use data-event="input:mutationName" on a slider. Pulse replaces innerHTML on every mutation, which interrupts the drag mid-gesture. Use change instead — it fires once when the user releases the handle.

Prop	Type	Default
`name`	string	—	Field name — submitted in FormData
`label`	string	—	Visible label text
`min`	number	0	Minimum value
`max`	number	100	Maximum value
`step`	number	1	Step increment
`value`	number	50	Current value
`showValue`	boolean	false	Show current value live beside the label as you drag
`disabled`	boolean	false
`hint`	string	—	Helper text below the slider
`event`	string	—	`data-event` binding, e.g. `change:mutationName`
`id`	string	—	Override the generated `id`
`class`	string	—