dha-slider
v4.1.0
Published
DHA SDK slider
Downloads
59
Readme
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;
Contribute
see Github wiki
NPM
https://www.npmjs.com/package/dha-slider
License
pending