0
# React Rangeslider
1

2
React Rangeslider is a fast & lightweight React component that acts as a drop-in replacement for HTML5 input range slider element. It provides a highly customizable slider with support for both horizontal and vertical orientations, custom tooltips, value formatting, labels at specific positions, and reverse direction modes.
3

4
## Package Information
5

6
- **Package Name**: react-rangeslider
7
- **Package Type**: npm
8
- **Language**: JavaScript (React)
9
- **Installation**: `npm install react-rangeslider --save` or `yarn add react-rangeslider`
10

11
## Core Imports
12

13
```javascript
14
import Slider from 'react-rangeslider'
15

16
// To include the default styles
17
import 'react-rangeslider/lib/index.css'
18
```
19

20
For CommonJS:
21

22
```javascript
23
const Slider = require('react-rangeslider')
24
```
25

26
For UMD (Browser):
27

28
```html
29
<script src="https://unpkg.com/react-rangeslider/umd/rangeslider.min.js"></script>
30
<link rel="stylesheet" href="https://unpkg.com/react-rangeslider/umd/rangeslider.min.css" />
31
```
32

33
Available as `window.ReactRangeslider`
34

35
## Basic Usage
36

37
```jsx
38
import React, { Component } from 'react'
39
import Slider from 'react-rangeslider'
40

41
class VolumeSlider extends Component {
42
  constructor(props, context) {
43
    super(props, context)
44
    this.state = {
45
      volume: 0
46
    }
47
  }
48

49
  handleOnChange = (value) => {
50
    this.setState({
51
      volume: value
52
    })
53
  }
54

55
  render() {
56
    let { volume } = this.state
57
    return (
58
      <Slider
59
        value={volume}
60
        orientation="vertical"
61
        onChange={this.handleOnChange}
62
      />
63
    )
64
  }
65
}
66
```
67

68
## Capabilities
69

70
### Rangeslider Component
71

72
The main slider component providing complete range input functionality with extensive customization options.
73

74
```jsx { .api }
75
<Slider
76
  min={number}
77
  max={number}
78
  step={number}
79
  value={number}
80
  orientation={string}
81
  reverse={boolean}
82
  tooltip={boolean}
83
  labels={object}
84
  handleLabel={string}
85
  format={function}
86
  onChangeStart={function}
87
  onChange={function}
88
  onChangeComplete={function}
89
/>
90
```
91

92
#### Props
93

94
**Range Configuration:**
95

96
```jsx { .api }
97
// Range bounds and stepping
98
min: number          // Default: 0 - minimum value the slider can hold
99
max: number          // Default: 100 - maximum value the slider can hold
100
step: number         // Default: 1 - step in which increments/decrements are made
101
value: number        // Default: 0 - current value of the slider
102
```
103

104
**Display Configuration:**
105

106
```jsx { .api }
107
// Appearance and layout
108
orientation: string  // Default: 'horizontal' - orientation ('horizontal' or 'vertical')
109
reverse: boolean     // Default: false - reverse direction of vertical slider (top-bottom)
110
tooltip: boolean     // Default: true - show or hide tooltip
111
handleLabel: string  // Default: '' - string label to appear inside slider handles
112
```
113

114
**Labeling and Formatting:**
115

116
```jsx { .api }
117
// Custom labels and value formatting
118
labels: object       // Default: {} - key-value pairs for custom labels
119
                    // Example: { 0: 'Low', 50: 'Medium', 100: 'High' }
120
format: function     // Optional - function to format and display value in label/tooltip
121
                    // Example: (value) => value + ' kg'
122
```
123

124
**Event Handlers:**
125

126
```jsx { .api }
127
// Event callbacks
128
onChangeStart: function    // Optional - called when user starts dragging handle
129
                          // Signature: (event) => void
130
onChange: function        // Optional - called during dragging or clicking
131
                         // Signature: (value, event) => void  
132
onChangeComplete: function // Optional - called when user stops dragging handle
133
                          // Signature: (event) => void
134
```
135

136
#### Usage Examples
137

138
**Horizontal Slider with Custom Labels:**
139

140
```jsx
141
import React, { useState } from 'react'
142
import Slider from 'react-rangeslider'
143

144
function CustomLabelsSlider() {
145
  const [value, setValue] = useState(10)
146
  
147
  const labels = {
148
    0: 'Low',
149
    50: 'Medium', 
150
    100: 'High'
151
  }
152
  
153
  const formatKg = (value) => value + ' kg'
154
  
155
  return (
156
    <Slider
157
      min={0}
158
      max={100}
159
      value={value}
160
      labels={labels}
161
      format={formatKg}
162
      handleLabel={value}
163
      onChange={setValue}
164
    />
165
  )
166
}
167
```
168

169
**Vertical Slider:**
170

171
```jsx
172
import React, { useState } from 'react'
173
import Slider from 'react-rangeslider'
174

175
function VerticalSlider() {
176
  const [value, setValue] = useState(25)
177
  
178
  return (
179
    <div style={{ height: '200px' }}>
180
      <Slider
181
        min={0}
182
        max={100}
183
        value={value}
184
        orientation="vertical"
185
        onChange={setValue}
186
      />
187
    </div>
188
  )
189
}
190
```
191

192
**Slider with Event Handlers:**
193

194
```jsx
195
import React, { useState } from 'react'
196
import Slider from 'react-rangeslider'
197

198
function EventHandlerSlider() {
199
  const [value, setValue] = useState(50)
200
  const [isDragging, setIsDragging] = useState(false)
201
  
202
  const handleChangeStart = (event) => {
203
    setIsDragging(true)
204
    console.log('Started dragging')
205
  }
206
  
207
  const handleChange = (value, event) => {
208
    setValue(value)
209
    console.log('Value changed to:', value)
210
  }
211
  
212
  const handleChangeComplete = (event) => {
213
    setIsDragging(false)
214
    console.log('Stopped dragging, final value:', value)
215
  }
216
  
217
  return (
218
    <Slider
219
      value={value}
220
      onChangeStart={handleChangeStart}
221
      onChange={handleChange}  
222
      onChangeComplete={handleChangeComplete}
223
    />
224
  )
225
}
226
```
227

228
**Reverse Direction Slider:**
229

230
```jsx
231
import React, { useState } from 'react'
232
import Slider from 'react-rangeslider'
233

234
function ReverseSlider() {
235
  const [value, setValue] = useState(8)
236
  
237
  return (
238
    <div style={{ height: '200px' }}>
239
      <Slider
240
        min={0}
241
        max={10}
242
        value={value}
243
        orientation="vertical"
244
        reverse={true}
245
        onChange={setValue}
246
      />
247
    </div>
248
  )
249
}
250
```
251

252
### Styling and CSS Classes
253

254
React Rangeslider applies the following CSS classes that can be customized:
255

256
```css { .api }
257
.rangeslider               /* Base slider container */
258
.rangeslider-horizontal    /* Horizontal orientation */
259
.rangeslider-vertical      /* Vertical orientation */  
260
.rangeslider-reverse       /* Applied when reverse=true */
261
.rangeslider__fill         /* Fill area of slider */
262
.rangeslider__handle       /* Slider handle */
263
.rangeslider__handle-tooltip /* Tooltip displayed on handle */
264
.rangeslider__handle-label  /* Label inside handle */
265
.rangeslider__labels       /* Container for custom labels */
266
.rangeslider__label-item   /* Individual label items */
267
```
268

269
### Accessibility Features
270

271
The slider component includes built-in accessibility support:
272

273
```jsx { .api }
274
// Accessibility attributes automatically applied
275
aria-valuemin={min}        // Minimum value
276
aria-valuemax={max}        // Maximum value
277
aria-valuenow={value}      // Current value  
278
aria-orientation={orientation} // Slider orientation
279
tabIndex={0}               // Keyboard focusable
280
```
281

282
**Keyboard Navigation:**
283
- Arrow Up/Right: Increase value by step
284
- Arrow Down/Left: Decrease value by step
285

286
### Browser Support
287

288
- All modern browsers
289
- Includes ResizeObserver polyfill for broader compatibility
290
- Touch device support for mobile interactions
291
- Mouse and touch event handling
292

293
## Dependencies
294

295
```json { .api }
296
{
297
  "dependencies": {
298
    "classnames": "^2.2.3",
299
    "resize-observer-polyfill": "^1.4.2"
300
  },
301
  "peerDependencies": {
302
    "react": "^0.14.0 || ^15.0.0"
303
  }
304
}
305
```