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
```