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 track
• trackColor: Color of tracks
• widthUnit: px, em, etc. Default is px.