import { NSlider } from '@nayan-ui/react';

const Slider = () => {
  return (
    <NSlider defaultValue={50} max={100} step={1} disabled={false} onChange={value => console.log(value)} />
  );
};

export default Slider;

Attributes

Name	Type	Default	Details
value	number	Optional	Controlled slider value.
defaultValue	number	Optional	Default slider value.
onChange	(value: number) => void	Optional	Callback when slider value changes.
minValue	number	0	Minimum value of the slider.
maxValue	number	100	Maximum value of the slider.
step	number	1	Step increment of the slider.
isDisabled	boolean	false	Whether the slider is disabled.
showOutput	boolean	false	Whether to show the current value output.
className	string	' '	You can customise by passing tailwind classes.
trackClassName	string	' '	You can customise track by passing tailwind classes.
fillClassName	string	' '	You can customise fill by passing tailwind classes.
thumbClassName	string	' '	You can customise thumb by passing tailwind classes.

Slider

Demo

Demo Coming Soon

Usage

Attributes

Tags