@sigx/lynx-daisyui · Stable · Component library

Range#

A drag-to-set slider for a numeric value, with two-way model binding, color and size ramps, and configurable min/max/step.

Import#

TSX

import { Range } from '@sigx/lynx-daisyui';

Overview#

Range is a frame-locked slider: dragging the thumb runs on the main thread for smooth tracking and writes the mapped value back into your state. Bind it two-way with model (the sigx way), or drive it as a controlled component with the static value prop plus the onChange event. Values are quantized to step (relative to min) and clamped to [min, max].

Props#

Prop	Type	Default	Description
`model`	`Model<number>`	-	Two-way binding to a signal number. Pass an accessor (e.g. `() => state.volume`) so drags flow back into your state.
`value`	`number`	`min`	Controlled value when no `model` is bound.
`min`	`number`	`0`	Lower bound of the track.
`max`	`number`	`100`	Upper bound of the track.
`step`	`number`	`1`	Quantization increment relative to `min`. `0` (or less) is continuous.
`color`	`RangeColor`	-	Accent color of the fill. One of `primary`, `secondary`, `accent`, `info`, `success`, `warning`, `error`.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Slider thickness.
`disabled`	`boolean`	`false`	Blocks dragging; the value stays put.
`class`	`string`	-	Additional CSS classes appended to the root.

Events#

Event	Type	Description
`onChange`	`(value: number) => void`	Fired as the quantized value changes during a drag. Use this for the controlled (no-`model`) case.

Basic usage#

Bind a signal with model and the slider drives it as you drag:

TSX

import { component, signal } from '@sigx/lynx';
import { Col, Range, Text } from '@sigx/lynx-daisyui';

const Volume = component(() => {
  const volume = signal(40);
  return () => (
    <Col gap={12}>
      <Range model={() => volume.value} />
      <Text class="opacity-60">value: {volume.value}</Text>
    </Col>
  );
});

Min, max and step#

Constrain the range and snap to whole steps:

TSX

import { component, signal } from '@sigx/lynx';
import { Col, Range, Text } from '@sigx/lynx-daisyui';

const Score = component(() => {
  const score = signal(7);
  return () => (
    <Col gap={12}>
      <Range model={() => score.value} min={0} max={10} step={1} color="accent" />
      <Text class="opacity-60">value: {score.value} / 10</Text>
    </Col>
  );
});

Colors and sizes#

TSX

import { component } from '@sigx/lynx';
import { Col, Range } from '@sigx/lynx-daisyui';

const Variants = component(() => () => (
  <Col gap={16}>
    <Range value={60} color="primary" />
    <Range value={60} color="success" size="lg" />
    <Range value={30} disabled />
  </Col>
));