react-track-slider
v1.0.2
Published
Track slider is a simple package for React. It provides a beautiful slider with a lot of customisations.
Downloads
26
Maintainers
Readme
Track Slider for React.js
Track slider is a simple package for React. It provides a beautiful slider with a lot of customisations.
Example
import { useState } from "react";
import TrackSlider from "react-track-slider";
import "react-track-slider/style";
function App() {
const [activeTrack, setActiveTrack] = useState(1);
return (
<>
<TrackSlider getValue={(current) => setActiveTrack(current)} />
<h2 style={{ textAlign: "center" }}>{activeTrack}</h2>
</>
);
}
export default App;
Example with optional attributes
<TrackSlider getValue={(current) => setActiveTrack(current)} gap={4} :width="8" active-color="red" track-color="gray" width-unit="px" />
Attributes
gap
: gap between tracks in number. Default is 4.width
: width of each track in number. Default is 4.activeColor
: Color of active tracktrackColor
: Color of trackswidthUnit
: px, em, etc. Default is px.