or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-react-rangeslider

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

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/react-rangeslider@2.2.x

To install, run

npx @tessl/cli install tessl/npm-react-rangeslider@2.2.0

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"
  }
}