@bilal111996/react-range-slider

❤ Awesome Range slider ❤

---

Table of Contents

• Installation
• Usage
• Issues
  • 🐛 Bugs
  • 💡 Feature Requests
• Contributors ✨
• LICENSE

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.

See Bugs

💡 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.

See Feature Requests

Contributors ✨

Thanks goes to these people (emoji key):

Bilal Yaqoob

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT