CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-rangeslider

A lightweight React component that acts as a HTML5 input range slider polyfill

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

React Rangeslider

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.

Package Information

  • Package Name: react-rangeslider
  • Package Type: npm
  • Language: JavaScript (React)
  • Installation: npm install react-rangeslider --save or yarn add react-rangeslider

Core Imports

import Slider from 'react-rangeslider'

// To include the default styles
import 'react-rangeslider/lib/index.css'

For CommonJS:

const Slider = require('react-rangeslider')

For UMD (Browser):

<script src="https://unpkg.com/react-rangeslider/umd/rangeslider.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-rangeslider/umd/rangeslider.min.css" />

Available as window.ReactRangeslider

Basic Usage

import React, { Component } from 'react'
import Slider from 'react-rangeslider'

class VolumeSlider extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      volume: 0
    }
  }

  handleOnChange = (value) => {
    this.setState({
      volume: value
    })
  }

  render() {
    let { volume } = this.state
    return (
      <Slider
        value={volume}
        orientation="vertical"
        onChange={this.handleOnChange}
      />
    )
  }
}

Capabilities

Rangeslider Component

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

<Slider
  min={number}
  max={number}
  step={number}
  value={number}
  orientation={string}
  reverse={boolean}
  tooltip={boolean}
  labels={object}
  handleLabel={string}
  format={function}
  onChangeStart={function}
  onChange={function}
  onChangeComplete={function}
/>

Props

Range Configuration:

// Range bounds and stepping
min: number          // Default: 0 - minimum value the slider can hold
max: number          // Default: 100 - maximum value the slider can hold
step: number         // Default: 1 - step in which increments/decrements are made
value: number        // Default: 0 - current value of the slider

Display Configuration:

// Appearance and layout
orientation: string  // Default: 'horizontal' - orientation ('horizontal' or 'vertical')
reverse: boolean     // Default: false - reverse direction of vertical slider (top-bottom)
tooltip: boolean     // Default: true - show or hide tooltip
handleLabel: string  // Default: '' - string label to appear inside slider handles

Labeling and Formatting:

// Custom labels and value formatting
labels: object       // Default: {} - key-value pairs for custom labels
                    // Example: { 0: 'Low', 50: 'Medium', 100: 'High' }
format: function     // Optional - function to format and display value in label/tooltip
                    // Example: (value) => value + ' kg'

Event Handlers:

// Event callbacks
onChangeStart: function    // Optional - called when user starts dragging handle
                          // Signature: (event) => void
onChange: function        // Optional - called during dragging or clicking
                         // Signature: (value, event) => void  
onChangeComplete: function // Optional - called when user stops dragging handle
                          // Signature: (event) => void

Usage Examples

Horizontal Slider with Custom Labels:

import React, { useState } from 'react'
import Slider from 'react-rangeslider'

function CustomLabelsSlider() {
  const [value, setValue] = useState(10)
  
  const labels = {
    0: 'Low',
    50: 'Medium', 
    100: 'High'
  }
  
  const formatKg = (value) => value + ' kg'
  
  return (
    <Slider
      min={0}
      max={100}
      value={value}
      labels={labels}
      format={formatKg}
      handleLabel={value}
      onChange={setValue}
    />
  )
}

Vertical Slider:

import React, { useState } from 'react'
import Slider from 'react-rangeslider'

function VerticalSlider() {
  const [value, setValue] = useState(25)
  
  return (
    <div style={{ height: '200px' }}>
      <Slider
        min={0}
        max={100}
        value={value}
        orientation="vertical"
        onChange={setValue}
      />
    </div>
  )
}

Slider with Event Handlers:

import React, { useState } from 'react'
import Slider from 'react-rangeslider'

function EventHandlerSlider() {
  const [value, setValue] = useState(50)
  const [isDragging, setIsDragging] = useState(false)
  
  const handleChangeStart = (event) => {
    setIsDragging(true)
    console.log('Started dragging')
  }
  
  const handleChange = (value, event) => {
    setValue(value)
    console.log('Value changed to:', value)
  }
  
  const handleChangeComplete = (event) => {
    setIsDragging(false)
    console.log('Stopped dragging, final value:', value)
  }
  
  return (
    <Slider
      value={value}
      onChangeStart={handleChangeStart}
      onChange={handleChange}  
      onChangeComplete={handleChangeComplete}
    />
  )
}

Reverse Direction Slider:

import React, { useState } from 'react'
import Slider from 'react-rangeslider'

function ReverseSlider() {
  const [value, setValue] = useState(8)
  
  return (
    <div style={{ height: '200px' }}>
      <Slider
        min={0}
        max={10}
        value={value}
        orientation="vertical"
        reverse={true}
        onChange={setValue}
      />
    </div>
  )
}

Styling and CSS Classes

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

.rangeslider               /* Base slider container */
.rangeslider-horizontal    /* Horizontal orientation */
.rangeslider-vertical      /* Vertical orientation */  
.rangeslider-reverse       /* Applied when reverse=true */
.rangeslider__fill         /* Fill area of slider */
.rangeslider__handle       /* Slider handle */
.rangeslider__handle-tooltip /* Tooltip displayed on handle */
.rangeslider__handle-label  /* Label inside handle */
.rangeslider__labels       /* Container for custom labels */
.rangeslider__label-item   /* Individual label items */

Accessibility Features

The slider component includes built-in accessibility support:

// Accessibility attributes automatically applied
aria-valuemin={min}        // Minimum value
aria-valuemax={max}        // Maximum value
aria-valuenow={value}      // Current value  
aria-orientation={orientation} // Slider orientation
tabIndex={0}               // Keyboard focusable

Keyboard Navigation:

  • Arrow Up/Right: Increase value by step
  • Arrow Down/Left: Decrease value by step

Browser Support

  • All modern browsers
  • Includes ResizeObserver polyfill for broader compatibility
  • Touch device support for mobile interactions
  • Mouse and touch event handling

Dependencies

{
  "dependencies": {
    "classnames": "^2.2.3",
    "resize-observer-polyfill": "^1.4.2"
  },
  "peerDependencies": {
    "react": "^0.14.0 || ^15.0.0"
  }
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-rangeslider@2.2.x
Publish Source
CLI
Badge
tessl/npm-react-rangeslider badge