Slider
A numeric slider with optional pips, editable values and range selection.
Installation
Import from the Reflow workspace package.
Compact
Open demoimport { Slider } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Slider variant="pips" step={1} size="compact" disabled={false} defaultValue={25} />
</>
)
}Range
import { Slider } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Slider defaultValue={[25, 75]} />
</>
)
}Steps
import { Slider } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Slider defaultValue={50} step={25} showSteps />
<Slider defaultValue={50} step={10} showSteps />
</>
)
}Non-uniform Steps
import { Slider } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
const steps = [
{ value: 'search', title: 'Searching sources', content: 'Found four relevant pages.', status: 'complete' as const },
{ value: 'analyze', title: 'Analyzing results', content: 'Comparing approaches.', status: 'active' as const },
]
return () => (
<>
<Slider label="Rating" steps={[0.1, 0.5, 0.7, 1.1, 1.3]} defaultValue={0.7} formatValue={(value) => value + ' A'} showSteps />
</>
)
}Value Display
import { Slider } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Slider label="Volume" defaultValue={40} valuePosition="left" />
<Slider label="Volume" defaultValue={60} valuePosition="right" />
<Slider defaultValue={50} valuePosition="tooltip" />
</>
)
}Format
import { Slider } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Slider size="compact" label="Opacity" defaultValue={75} formatValue={(value) => value + '%'} />
</>
)
}Disabled
import { Slider } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Slider size="compact" defaultValue={50} disabled />
</>
)
}Default
import { Slider } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Slider size="default" label="Roundness" min={0} max={4} defaultValue={2} />
</>
)
}Default — Scrubber
import { Slider } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Slider size="default" label="Volume" variant="scrubber" defaultValue={50} formatValue={(value) => value + '%'} />
</>
)
}Default — Format
import { Slider } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
const labels = ['Off', 'Low', 'Medium', 'High', 'Ultra']
return () => (
<>
<Slider size="default" label="Quality" min={0} max={4} defaultValue={2} formatValue={(value) => labels[value]} />
</>
)
}Default — Disabled
import { Slider } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Slider size="default" label="Roundness" min={0} max={4} defaultValue={2} disabled />
</>
)
}API Reference
Public props for the Reflow implementation. Native controls also accept their standard HTML attributes and Remix event mixes.
Slider
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | Value | Accessible name or visible label for the control. |
name | string | [string, string] | — | Name used when the control participates in a form. |
value | SliderValue | — | Current value when controlled by the parent. |
defaultValue | SliderValue | — | Initial value for an uncontrolled component. |
onChange | ((value: SliderValue) => void) | — | Called with the updated value. |
min | number | 0 | Minimum allowed value. |
max | number | 100 | Maximum allowed value. |
step | number | 1 | Increment between allowed values. |
steps | number[] | — | Explicit allowed values, including non-uniform steps. |
showSteps | boolean | false | Draws a marker at each step. |
showValue | boolean | true | Displays an editable numeric value. |
valuePosition | ValuePosition | left | Placement of the value display. |
formatValue | ((value: number) => string) | — | Formats the displayed number. |
size | "default" | "compact" | — | Control density or icon-button dimensions. |
variant | "pips" | "scrubber" | pips | Visual or layout treatment. |
disabled | boolean | — | Prevents interaction and conveys the disabled state. |
hideFill | boolean | — | Hides the slider fill. |
thumbColor | string | — | Custom slider thumb color. |
thumbBorderColor | string | — | Custom slider thumb outline. |