Dha-slider NPM

dha-slider

This module is a React Slider component to be used in your applications.

Getting Started

Install

Install from npm:

npm i dha-slider

A note about styles

Starting in version 4.0.1, the styles are no longer included in the import. You will need to import the styles separately.

import { Slider } from 'dha-slider';
import 'dha-slider/dist/style.css'; //Add this line somewhere in your project

If you do not import the styles, the slider may fail to render properly.

Slider Component

Slider Props:

Prop	Type	Optional	Default	Description
value	number	no	N/A	The value of the slider
onChange	(value: number) => void	no	N/A	Function called when the slider value changes
orientation	string	yes	'horizontal'	The orientation of the Slider
isDisabled	boolean	yes	undefined	Whether the whole Slider is disabled
onChangeEnd	(value: number) => void	yes	undefined	Fired when the slider stops moving
minValue	number	yes	0	The slider's minimum value
maxValue	number	yes	100	The slider's maximum value
step	number	yes	1	The slider's step value
label	string	yes	undefined	The label for the slider
lowerTag	string	yes	undefined	The lower tag for the slider
upperTag	string	yes	undefined	The upper tag for the slider
colorThumb	string	yes	'#07192d'	The color of the thumb
colorThumbActive	string	yes	'#092068'	The color of the thumb when active
formatOptions	Intl.NumberFormatOptions	yes	undefined	Format options for the number formatter

Example of using Slider module in a functional component:

import { Slider } from 'dha-slider';
import 'dha-slider/dist/style.css';

const Home = () => {
  const [sliderValue, setSliderValue] = useState(50);

  return (
    <>
      <Slider
        lowerTag={'Relaxed'}
        upperTag={'Anxious'}
        label="Anxiety"
        value={sliderValue}
        onChange={setSliderValue}
      />
    </>
  );
};
export default Home;