zillow / react-slider

Accessible, CSS agnostic, slider component for React.
https://zillow.github.io/react-slider
MIT License
883 stars 231 forks source link

README.md file should be updated for how to use the packege #310

Open tarekibnkhayer opened 7 months ago

tarekibnkhayer commented 7 months ago

Most npm packege has the section of Usage in the home page .But i don't find here the section which might be a bit of user unfriendly.

janie314 commented 6 months ago

What about a simple example like the following? This would demonstrate how to use the key CSS properties.

Slider.tsx

import ReactSlider from "react-slider";
import "./Slider.css";

function Slider() {
  return (
    <ReactSlider
      className="horizontal-slider"
      thumbClassName="thumb"
      trackClassName="track"
    />
  );
}

export { Slider };

Slider.css

.horizontal-slider {
  width: 100%;
  max-width: 20ch;
  padding-left: 0.5%;
  padding-right: 0.5%;
}

.thumb {
  cursor: pointer;
  background: black;
  border: 10px solid black;
  border-radius: 100%;
  transform: translate(0,-50%);
  display: block;
}

.track {
  background: black;
  height: 5px;
  transform: translate(0,-50%);
  z-index: 50;
}
tarekibnkhayer commented 6 months ago

Yeah, I think that would be nice.