react-slider icon indicating copy to clipboard operation
react-slider copied to clipboard

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

Open tarekibnkhayer opened this issue 2 years ago • 2 comments

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.

tarekibnkhayer avatar Nov 10 '23 09:11 tarekibnkhayer

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;
}

janie314 avatar Dec 30 '23 14:12 janie314

Yeah, I think that would be nice.

tarekibnkhayer avatar Dec 30 '23 14:12 tarekibnkhayer