forms
Slider
A draggable range control with full keyboard support and step snapping.
Examples
Value and steps
`formatValue` shapes both the visible number and the one `aria-valuetext` announces, so the two cannot disagree.
Arrow keys step by 1, Page Up and Page Down by 10.
Variants
All five `variant` values beside the same five in the `success` tone — `minimal` keeps the thumb hidden until hover or focus. Every tile copies on its own.
Sizes
`size` from `xs` to `xl` with `showValue`, then the same scale paired with each `thumb` shape.
Scale
Sizes with thumb shapes
Semantic tones
Six `tone` values across the `default`, `solid` and `soft` variants — fill, thumb and soft rail all come from the tone tokens.
Default variant
Solid variant
Soft variant
Thumb shapes
`thumb` as circle, square, bar or pill across sizes and variants, then custom thumbs built from `--sl-thumb-w`, `--sl-thumb-bg` and `--sl-thumb-shadow` in `className`.
Shapes
Across sizes and variants
Custom with CSS variables
Marks
`marks` as one tick per step, ticks at chosen values, or `{ value, label }` stops — with `tooltip`, `showValue` and on a `RangeSlider`.
Tooltips
`tooltip` on hover, focus and drag, or pinned with `"always"`; `formatValue` turns the bubble into currency, a percentage, m:ss or °C and announces the same text.
Vertical
`orientation="vertical"` fills its parent’s height — an equalizer, a fader with `showValue`, labelled marks, a pinned tooltip and a track-only bar.
Range slider
Two native range inputs over one track — `minStepsBetween` keeps them apart, `formatValue` shapes the label, tooltip and `aria-valuetext`, and `thumbLabels` names each thumb.
Bold styles
Sixteen looks built only from `className` and the `--sl-*` variables — neon, glass, iOS chunky, brutalist, striped, segmented and more, with no fork of the component. Copy any tile on its own.
Media controls
A player card: a `minimal` scrubber with an m:ss tooltip and buffered fill, a volume slider whose icon follows the level, playback speed on marks, and stepper buttons for zoom.
Colour sliders
Hue, saturation, lightness and alpha — a transparent `--sl-rail` lets each `--sl-fill-image` gradient show across the whole track, recomputed from the current colour.
#6c47ffrgb(108 71 255)hsl(252 100% 64%)Expressive scales
Satisfaction with a face that changes and a tone that follows, a thermostat on a cold-to-hot gradient, a spice level and a 0–10 effort scale with labelled marks.
States
`disabled` and `invalid` on `Slider` and `RangeSlider`, plus `FieldRoot` wiring the label, description, required marker and error text.
Above the $80k approved for this quarter.
Seats are billed per active member.
Locked by your organisation’s data policy.
Controlled patterns
A number input with clamping, preset buttons, a reset, two sliders on one value, editable range bounds and an `onValueChange` log.
- Drag the slider to log changes.
Forms
`name` posts the raw number, a range posts two values under one name, disabled controls drop out, and a threshold check drives `FieldRoot invalid`.
Submit the form to see its entries.
Product filters
A real filter panel — a price histogram over a range, a marked rating floor and a distance tooltip, all feeding one live result count.
Filters
3 active1,200 refurbished laptops from local sellers.
Pricing calculator
Seats, storage and billing period feed one live total — the storage slider walks an index so its labelled marks sit on a non-linear 10 GB to 1 TB scale.
Estimate your plan
Pay per seat, then add storage as your team grows.
Team at $10 per seat — SSO, shared projects and 90-day history.
$15 a month on top of seats.
Billed once a year instead of every month.
- 24 seats × $10
- $240
- Storage, 100 GB
- $15
- Annual discount
- −$51
- Total per month
- $204
Mixer console
Vertical faders with `bar` thumbs and dB readouts — mute disables a channel, solo repaints the rest, and the master’s segmented `--sl-fill-image` turns `danger` past 0 dB.
Mix bus
Mute locks a channel's fader. Solo silences every channel that is not soloed.
Reading settings
Four sliders writing straight into a live preview’s inline style — labelled marks on font size, `formatValue` on line height and tracking, and a contrast warning below 60%.
Reading view
Tune the text to your eyes. Every change previews instantly.
The quiet work of good type
When size, spacing and contrast suit the reader, the letters stop asking for attention and only the meaning is left. That is all these four controls are for — nudge them until the page disappears.
Wider spacing helps at small sizes.
How strongly text stands out from the page.
Loan calculator
Amount, term and rate drive an amortised monthly payment and a principal-versus-interest bar, with the rate slider’s `tone` tracking how expensive the loan is getting.
Mortgage calculator
A fixed-rate loan, repaid in equal monthly instalments.
Close to the typical fixed rate for this term.
- Principal
- $420,000
- Total interest
- $525,765
- Total cost
- $945,765
Own the source
Noksha ships as a package and as copy-paste source. Take the files and they are yours to change. These are read from the generated registry, so they are exactly what the library ships — never a paraphrase of it.
Take these files, and field, internal helpers along with them — the imports below point at them. Or let the CLI do it: npx @noksha-ui/cli add slider writes them, follows the same dependency graph, and fixes up the imports.
export { RangeSlider, rangeSliderVariants, Slider, sliderVariants } from './slider.js';
export type {
RangeSliderProps,
SliderMark,
SliderOrientation,
SliderProps,
SliderSize,
SliderThumb,
SliderTone,
SliderTooltip,
SliderVariant,
} from './slider.types.js';API reference
Accepted values
- SliderSize
xssmmdlgxl- SliderVariant
defaultsolidsoftoutlineminimal- SliderThumb
circlesquarebarpill- SliderOrientation
horizontalvertical- SliderTooltip
booleanalways
SliderMark
| Prop | Type | Description |
|---|---|---|
| value* | number | — |
| label | React.ReactNode | — |
SliderProps
Also accepts everything from Omit<
React.InputHTMLAttributes<HTMLInputElement>,
'size' | 'type' | 'value' | 'defaultValue' | 'onChange'
>.
| Prop | Type | Description |
|---|---|---|
| value | number | — |
| defaultValue | number | — |
| onValueChange | (value: number) => void | — |
| min | number | — |
| max | number | — |
| step | number | — |
| size | SliderSize | — |
| tone | SliderTone | — |
| variant | SliderVariant | — |
| thumb | SliderThumb | — |
| orientation | SliderOrientation | — |
| invalid | boolean | — |
| showValue | boolean | Show the current value beside the track. |
| tooltip | SliderTooltip | — |
| marks | boolean | ReadonlyArray<number | SliderMark> | — |
| formatValue | (value: number) => string | Formats the displayed value, and the one announced by `aria-valuetext`. |
| containerClassName | string | Classes for the wrapper; `className` styles the track itself. |
RangeSliderProps
Also accepts everything from Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'>.
| Prop | Type | Description |
|---|---|---|
| value | [number, number] | — |
| defaultValue | [number, number] | — |
| onValueChange | (value: [number, number]) => void | — |
| min | number | — |
| max | number | — |
| step | number | — |
| minStepsBetween | number | — |
| size | SliderSize | — |
| tone | SliderTone | — |
| variant | SliderVariant | — |
| thumb | SliderThumb | — |
| invalid | boolean | — |
| disabled | boolean | — |
| name | string | — |
| showValue | boolean | — |
| tooltip | SliderTooltip | — |
| marks | boolean | ReadonlyArray<number | SliderMark> | — |
| formatValue | (value: number) => string | — |
| thumbLabels | [string, string] | — |