Inputs@knitui/components

Slider

Slider captures a single numeric value within a range by dragging a thumb. Accent comes from the theme ramp ($color9); recolor via the theme prop. RangeSlider is also exported for two-thumb ranges.

WebiOSAndroid9 style slots25 own props14 examples

Stories Source Tests Open in Storybook

import { Slider } from "@knitui/components";

Playground

Loading playground…

sizeTrack thickness and thumb diameter.

min

max

step

disabled

false

inverted

false

labelAlwaysOn

false

orientation

Playground

<Slider
  min={0}
  max={100}
  step={1}
  size="md"
  defaultValue={40}
  disabled={false}
  inverted={false}
  labelAlwaysOn={false}
/>

Examples

Sizes

The seven token sizes, from xxs to xxl, showing track and thumb scaling.

Loading example…

SizesSource Storybook

Shadows

Elevation shadow ladder applied via the inherited shadow prop.

Loading example…

ShadowsSource Storybook

Disabled

Disabled state — reduced opacity with pointer events off; keyboard ignored.

Loading example…

DisabledSource Storybook

Label Always On

Always-visible value label bubble above the thumb.

Loading example…

Label Always OnSource Storybook

Custom Label

Custom label formatter — displays a unit suffix next to the value.

Loading example…

Custom LabelSource Storybook

With Marks

Marks along the track with labels; thumb snaps to the nearest marked step.

Loading example…

With MarksSource Storybook

Inverted

Inverted fill — the bar covers the right side of the thumb rather than the left.

Loading example…

InvertedSource Storybook

Vertical

Vertical orientation — the thumb travels bottom-to-top.

Loading example…

VerticalSource Storybook

Controlled

Controlled value — the displayed number updates as you drag.

Loading example…

ControlledSource Storybook

Range

RangeSlider — two thumbs capture a [start, end] interval.

Loading example…

RangeSource Storybook

Range Controlled

Controlled RangeSlider — selected interval displayed alongside the track.

Loading example…

Range ControlledSource Storybook

Themed

Themed slider — the filled bar and thumb border follow the active theme accent.

Loading example…

ThemedSource Storybook

Styles

Per-slot styles targets individual parts — here the track, bar and thumb.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`defaultValue`	`number \| undefined`	`min`	Uncontrolled initial value.
`disabled` system	`boolean \| undefined`	`false`	Disable interaction.
`domain`	`[number, number] \| undefined`	`[min, max]`	Selectable value range, overriding `[min, max]` for geometry, selection and aria bounds.
`hiddenInputProps`	`DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> \| undefined`	—	Props forwarded to the hidden form input (web).
`inverted`	`boolean \| undefined`	`false`	Invert which side of the track is filled.
`label`	`ReactNode \| ((value: number) => ReactNode)`	`identity`	Format/replace the value label. Pass `null` to hide it.
`labelAlwaysOn`	`boolean \| undefined`	`false`	Always show the value label, not just while dragging/hovering.
`marks`	`SliderMark[] \| undefined`	—	Marks rendered along the track.
`max`	`number \| undefined`	`100`	Maximum value.
`min`	`number \| undefined`	`0`	Minimum value.
`name`	`string \| undefined`	—	Hidden input `name`, for uncontrolled form submission (web).
`onChange`	`((value: number) => void) \| undefined`	—	Called on every value change while dragging / on key press.
`onChangeEnd`	`((value: number) => void) \| undefined`	—	Called once the selection is finished (pointer up / key press).
`orientation`	`SliderOrientation \| undefined` horizontal · vertical	`'horizontal'`	Layout axis.
`precision`	`number \| undefined`	derived from `step`	Significant decimals to round emitted values to.
`radius` system	`string \| number \| undefined`	`'xl'`	Border radius of the track/bar.
`restrictToMarks`	`boolean \| undefined`	`false`	Restrict selectable values to the `marks` array.
`scale`	`((value: number) => number) \| undefined`	`identity`	Transform the displayed value (e.g. exponential scale) for label/aria.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`showLabelOnHover`	`boolean \| undefined`	`true`	Show the value label on hover (web).
`size` system	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'md'`	Track thickness and thumb diameter.
`startPointValue`	`number \| undefined`	—	Value at which the filled bar starts; the bar then extends from this point toward the thumb. Ignored when `inverted` is set.
`step`	`number \| undefined`	`1`	Step between values.
`styles` system	`SlotStyles<SliderStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`thumbChildren`	`ReactNode`	—	Content rendered inside the thumb.
`thumbLabel`	`string \| undefined`	—	Accessible label for the thumb.
`thumbProps`	`GetFinalProps<RNTamaguiViewNonStyleProps, StackStyleBase, { shadow?: "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined; }> \| undefined`	—
`thumbSize`	`string \| number \| undefined`	—	Diameter of the thumb. Derived from `size` by default. Accepts a `number` (px) or a numeric string (`"28"` / `"28px"`) for Mantine parity; non-numeric strings fall back to the `size`-derived default.
`thumbValueText`	`string \| ((value: number) => string) \| undefined`	—	Thumb `aria-valuetext`; a function receives the scaled value.
`value`	`number \| undefined`	—	Controlled value.

Style slots

Every part of Slider can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`bar`	`styles={{ bar: { … } }}`
`label`	`styles={{ label: { … } }}`
`labelAnchor`	`styles={{ labelAnchor: { … } }}`
`mark`	`styles={{ mark: { … } }}`
`markLabel`	`styles={{ markLabel: { … } }}`
`root`	`styles={{ root: { … } }}`
`thumb`	`styles={{ thumb: { … } }}`
`track`	`styles={{ track: { … } }}`
`trackContainer`	`styles={{ trackContainer: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 496 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.