{"library":"react-rangeslider","title":"react-rangeslider","description":"A lightweight React component that acts as a drop-in replacement for the HTML5 input range slider element. Current stable version is 2.2.0. The library ships with a single component, default styles, and an API including callbacks for change start and complete. It supports horizontal/vertical orientation, tooltips, formatted labels, and reverse direction. It uses peer dependencies for React 0.14 or 15, but does not support React 16+ leading to compatibility issues. Minimal bundle size (~3KB gzipped) distinguishes it from heavier slider libraries like rc-slider.","language":"javascript","status":"maintenance","last_verified":"Fri May 01","install":{"commands":["npm install react-rangeslider"],"cli":null},"imports":["import Slider from 'react-rangeslider'","import 'react-rangeslider/lib/index.css'","const Slider = require('react-rangeslider')"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { Component } from 'react';\nimport Slider from 'react-rangeslider';\nimport 'react-rangeslider/lib/index.css';\n\nclass VolumeSlider extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { volume: 0 };\n  }\n\n  handleOnChange = (value) => {\n    this.setState({ volume: value });\n  };\n\n  render() {\n    const { volume } = this.state;\n    return (\n      <Slider\n        value={volume}\n        orientation=\"vertical\"\n        onChange={this.handleOnChange}\n      />\n    );\n  }\n}\n\nexport default VolumeSlider;","lang":"javascript","description":"Basic usage with state and onChange handler for a vertical volume slider.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}