0.2.0 • Published 4 years ago
react-customizable-slider v0.2.0
React Customizable Slider
- A slider component which doesn't make assumptions about the slider's UI parts. This component has no UI of its own! it provides the logic, and you can create any thumb and track components you wish to use.
- Tested on Web and mobile browsers.
- Requires React >=16!
Installation
yarn add react-customizable-slider
or
npm i react-customizable-slider
Basic Implementation:
const MyComponent = () => {
const [value, setValue] = useState<number>(100);
return (
<div style={{ width: 300 }}>
<Slider
max={200}
min={50}
value={value}
onChange={setValue}
renderTrack={() => <div style={{ height: 2, background: '#c7c7c7', width: '100%' }} />}
renderThumb={() => <div style={{ height: 15, width: 15, borderRadius: 50, background: 'blue' }} />}
/>
<h4>{value}</h4>
</div>
);
};
The props used in the example above are all required!
There's an optional styling prop:
styling?: {
containerStyle?: CSSProperties,
trackStyle?: CSSProperties,
thumbStyle?: CSSProperties,
containerClass?: string,
trackClass?: string,
thumbClass?: string,
};
- It's best to control the slider's width by controlling the dimensions of the slider's parent container.
- PRs are welcome.