components / 10

marked slider

the value is not filling a bar. it is stretching a live pen stroke beneath a draggable glyph.

shadcnnpx shadcn@latest add berkantay/cheez/marked-slider

live

playground

64%

humanity

64%

how imperfect should this feel

size

axis

character

filled stroke

thumb glyph

stroke ink

thumb ink

state

<MarkedSlider
  label="humanity"
  value={64}
  min={0}
  max={100}
  orientation="horizontal"
  indicatorMark="long-underline"
  thumbMark="sparkle"
  character="rushed"
  onValueChange={setValue}
/>

behavior

states

single, range, vertical, disabled

default

weight

wave

energy

range

window

25 – 75

step

scale

4×

invalid

contrast

too low

disabled

locked

vertical

volume

large star

impact

composition

motion duration

180 – 420 ms

duration window

180 – 420 ms

minimum and maximum timing for the drawing character

reference

api

one primitive, one or many thumbs

part	prop	type	default	purpose
Slider	`value`	`number \| number[]`	`—`	controlled value or range
Slider	`defaultValue`	`number \| number[]`	`0`	uncontrolled initial value
Slider	`onValueChange`	`function`	`—`	continuous value callback
Slider	`onValueCommitted`	`function`	`—`	completed interaction callback
Slider	`min / max`	`number`	`0 / 100`	allowed bounds
Slider	`step`	`number`	`1`	value granularity
Slider	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	axis and keyboard direction
Slider	`indicatorMark`	`CheezType`	`"long-underline"`	horizontal filled stroke
Slider	`verticalIndicatorMark`	`CheezType`	`"arrow-down"`	vertical filled stroke
Slider	`thumbMark`	`CheezType`	`"sparkle"`	draggable glyph
Slider	`indicatorColor`	`string`	`"#35d9ff"`	filled stroke ink
Slider	`thumbColor`	`string`	`"#ff5fa2"`	thumb glyph ink
Slider	`character`	`"calm" \| "rushed" \| "chaotic"`	`"rushed"`	drawing personality
Slider	`size`	`"small" \| "medium" \| "large"`	`"medium"`	control scale
Slider	`showValue`	`boolean`	`true`	formatted live output
Slider	`valueSuffix`	`string`	`""`	display suffix
Slider	`thumbLabels`	`string[]`	`—`	range thumb names
Slider	`name`	`string`	`—`	native form field name
Slider	`disabled`	`boolean`	`false`	disabled state
Slider	`error`	`ReactNode`	`—`	invalid message and pink ink

behavior notes

Arrow keys move by one step
Page Up and Page Down use the large step
Home and End jump to the bounds
range thumbs receive distinct accessible names
hidden range inputs participate in forms
drag updates stretch existing SVG instead of rebuilding paths