Slider

v1.1.0

bash

npm install @hua-labs/hua

tsx

import { Slider } from "@hua-labs/hua";

$20 - $80

default

primary

success

warning

danger

Normal

Disabled


`variant`	`"default" \| "primary" \| "success" \| "warning" \| "danger"`	`"default"`	Visual style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Slider size
`value`	`number \| number[]`	`0`	Current value (single or range)
`onValueChange`	`(value: number \| number[]) => void`	-	Callback when value changes
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Value step increment
`showValue`	`boolean`	`false`	Display current value
`showLabel`	`boolean`	`false`	Display label
`label`	`string`	-	Label text
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Slider orientation
`disabled`	`boolean`	`false`	Disables the slider

docs:common.basicUsage

import { Slider } from '@hua-labs/hua';

<Slider />

Controlled

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

<Slider
  value={value}
  onValueChange={setValue}
  showValue
  label="Volume"
  showLabel
/>

Range Slider

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

<Slider
  value={range}
  onValueChange={setRange}
  showValue
  label="Price Range"
  showLabel
/>