{"library":"react-range-slider1","title":"react-rangeslider","description":"A fast and lightweight React component that serves as a drop-in replacement for the HTML5 input range slider element. The package is currently at version 2.5.8, with a stable API focused on simplicity and performance. It provides a declarative slider with customizable orientation (horizontal/vertical), min/max values, step size, tooltip display, labels, and callbacks for value changes. The package includes default CSS styles and supports both controlled and uncontrolled usage. Compared to alternatives, it emphasizes minimal bundle size, no external dependencies aside from React, and a straightforward API. The project appears to be in maintenance mode with no recent updates, and peer dependencies are limited to React 0.14.x or 15.x, which may cause compatibility issues with newer React versions.","language":"javascript","status":"maintenance","last_verified":"Fri May 01","install":{"commands":["npm install react-range-slider1"],"cli":null},"imports":["import Slider from 'react-rangeslider'","var Slider = require('react-rangeslider')","import 'react-rangeslider/lib/index.css'"],"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":"Shows a basic controlled vertical slider component using react-rangeslider, including state management and onChange handler.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}