{"library":"react-slider","title":"React Slider Component","description":"react-slider is an actively maintained React component designed for creating highly customizable range sliders. The current stable version is 2.0.6, with recent updates focusing on stability and compatibility across modern web environments. It supports both single and multiple handles, offers horizontal and vertical orientations, and includes accessibility features through props like `ariaLabel` and `ariaValuetext`. Key differentiators include built-in `ResizeObserver` support for dynamic slider resizing and a commitment to broad React compatibility, explicitly listing React 16, 17, and 18 as peer dependencies. The project demonstrates a consistent release cadence, regularly publishing patch updates for bug fixes and minor enhancements, with major versions introducing significant features and occasional breaking changes. It addresses common slider challenges such as mobile 'snap back' behavior and module resolution issues for modern JavaScript module systems.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-slider"],"cli":null},"imports":["import Slider from 'react-slider';","const Slider = require('react-slider');","import Slider from 'react-slider';\nimport type { SliderProps } from 'react-slider';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Slider from 'react-slider';\n\n// Basic inline styles for demonstration. In a real app, use CSS classes.\nconst thumbStyle = {\n  height: '25px',\n  width: '25px',\n  backgroundColor: '#555',\n  borderRadius: '50%',\n  cursor: 'grab',\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  color: '#fff',\n  fontSize: '0.8em'\n};\n\nconst trackStyle = (state, props) => ({\n  top: '0',\n  bottom: '0',\n  background: props.index === 1 ? '#ddd' : '#007bff',\n  borderRadius: '5px'\n});\n\nconst sliderContainerStyle = {\n  width: '80%',\n  margin: '50px auto',\n  height: '25px',\n  background: '#eee',\n  borderRadius: '5px',\n  display: 'flex',\n  alignItems: 'center',\n};\n\nfunction App() {\n  const [value, setValue] = React.useState(50);\n  const [rangeValues, setRangeValues] = React.useState([25, 75]);\n\n  return (\n    <div style={{ fontFamily: 'sans-serif', textAlign: 'center' }}>\n      <h1>React Slider Examples</h1>\n\n      <h2>Single Handle Slider</h2>\n      <div style={sliderContainerStyle}>\n        <Slider\n          value={value}\n          onChange={setValue}\n          renderTrack={(props, state) => <div {...props} style={trackStyle(state, props)} />}\n          renderThumb={(props, state) => <div {...props} style={thumbStyle}>{state.valueNow}</div>}\n          min={0}\n          max={100}\n          step={1}\n          ariaLabel=\"Single value slider\"\n        />\n      </div>\n      <p>Current Value: {value}</p>\n\n      <h2>Range Slider</h2>\n      <div style={sliderContainerStyle}>\n        <Slider\n          value={rangeValues}\n          onChange={setRangeValues}\n          renderTrack={(props, state) => <div {...props} style={trackStyle(state, props)} />}\n          renderThumb={(props, state) => <div {...props} style={thumbStyle}>{state.valueNow}</div>}\n          min={0}\n          max={100}\n          step={1}\n          ariaLabel={['Min value slider', 'Max value slider']}\n          pearling\n          minDistance={10}\n        />\n      </div>\n      <p>Current Range: [{rangeValues[0]}, {rangeValues[1]}]</p>\n    </div>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root') ?? document.createElement('div'));\nroot.render(<App />);","lang":"typescript","description":"This quickstart demonstrates both single-handle and dual-handle (range) sliders with custom thumb and track rendering. It shows how to manage slider state using React hooks and includes basic inline styles for clarity and immediate visual feedback.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}