Open tarekibnkhayer opened 7 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;
}
Yeah, I think that would be nice.
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.