@bilal111996/react-range-slider
v0.1.5
Published
This is an awesome react range slide, made with love ❤❤❤ by bilal yaqoob
Downloads
23
Maintainers
Readme
Table of Contents
Installation
This module is distributed via [npm][npm] and should be installed as one of your project's dependencies
:
npm install --save @bilal111996/react-range-slider
or
yarn add @bilal111996/react-range-slider
Usage
import RangeSlider from '@bilal111996/react-range-slider';
export default App = () => {
return (
<RangeSlider
orientation="VERTICAL" // "HORIZONTAL | VERTICAL" //defaults to HORIZONTAL
markSpacing={20} // Spacing value between tracks (in px) *REQUIRED*
trackColor="#212121" // The slider's track color //defaults to #212121
thumbColor="whitesmoke" // Background color for the thumb (movable part) //defaults to whitesmoke
thumbTextColor="#0277BD" // Color for the text in the thumb //defaults to #0D47A1
thumbSize={45} // The size of the thumb(in px) //defaults to 40
sliderColor="whitesmoke" // Background color for the slider //defaults to whitesmoke
range={[1, 20]} // The sliders range [lower, upper] *REQUIRED*
visibleCount={9} // The number of elements to be visible by default *REQUIRED*
defaultStart={1} // default value to start rangeSlider
onChange={(selectedValue) => { // Callback to received new value when slider value changes
console.log("SELECTED VALUE ", selectedValue)
}}
/>
)
}
Issues
Looking to contribute? Look for the Good First Issue label.
🐛 Bugs
Please file an issue for bugs, missing documentation, or unexpected behavior.
💡 Feature Requests
Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.
Contributors ✨
Thanks goes to these people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT