TkxSlider

Single handle

Volume

import { TkxSlider } from 'tekivex-ui';

const [value, setValue] = useState(50);

<TkxSlider
  label="Volume"
  min={0}
  max={100}
  value={value}
  onChange={setValue}
/>

Range (dual handle)

Range (dual handle)

Price range

Selected: $20–$80

const [range, setRange] = useState([20, 80]);

<TkxSlider
  label="Price range"
  min={0}
  max={500}
  value={range}
  onChange={setRange}
  formatValue={(v) => `$${v}`}
/>

Marks

With marks (snap)

Quality

Low

Med

High

<TkxSlider
  min={0}
  max={100}
  step={25}
  marks={[
    { value: 0,   label: '0%' },
    { value: 25,  label: '25%' },
    { value: 50,  label: '50%' },
    { value: 75,  label: '75%' },
    { value: 100, label: '100%' },
  ]}
/>

Setting marks snaps the slider to those values automatically.

Step

<TkxSlider min={0} max={1} step={0.05} />        {/* fine-grained */}
<TkxSlider min={0} max={100} step={10} />        {/* coarse */}
<TkxSlider min={0} max={5} step={1} marks={...} /> {/* discrete */}

Vertical

<TkxSlider orientation="vertical" min={0} max={100} value={x} onChange={setX} />

Color schemes

<TkxSlider colorScheme="primary" {...props} />
<TkxSlider colorScheme="success" {...props} />
<TkxSlider colorScheme="warning" {...props} />
<TkxSlider colorScheme="danger"  {...props} />

Accessibility — what’s automatic

• role="slider" with aria-valuenow, aria-valuemin, aria-valuemax
• aria-orientation per the orientation prop
• For range mode: each handle gets its own aria-label (“Lower bound” / “Upper bound”) — overridable via aria-label prop
• Keyboard:
  • Left / Right (or Down / Up) — step by step
  • Page Up / Page Down — step by step * 10
  • Home / End — jump to min / max
  • Range mode: handles can’t cross each other (lower handle can’t go past upper handle’s value, etc.)
• Touch: 44×44 hit area on each handle (visual handle is smaller)

Props

Prop	Type	Required	Description
min	number		Defaults to 0.
max	number		Defaults to 100.
step	number		Defaults to 1.
value	number | [number, number]		Single or range.
onChange	(value) => void		Fires on every change.
onChangeEnd	(value) => void		Fires only on release — useful for expensive operations.
marks	Mark[]		Snap-to discrete values.
orientation	'horizontal' | 'vertical'		Defaults to horizontal.
formatValue	(value) => string		Display formatter for the value tooltip.
colorScheme	string		Theme-token-driven color.

Source

src/components/TkxSlider.tsx