{"library":"rc-slider","title":"React Slider UI Component (rc-slider)","description":"rc-slider is a highly customizable UI component library for React applications, providing robust single-value sliders and dual-handle range input controls. The current stable version is 11.1.9, which receives active maintenance releases primarily focused on bug fixes and minor feature enhancements. While release cadence is not strictly fixed, updates appear frequently, addressing issues and improving accessibility. A key differentiator is its straightforward API for configuring marks, steps, and various callbacks, along with a `createSliderWithTooltip` utility for enhancing handle interactions. The library ships with comprehensive TypeScript definitions, facilitating type-safe development, and supports both modern ESM imports and CommonJS patterns. It's a foundational component used in many larger Ant Design ecosystem projects.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-slider"],"cli":null},"imports":["import Slider from 'rc-slider';","import { Range } from 'rc-slider';","import Slider from 'rc-slider';\nconst createSliderWithTooltip = Slider.createSliderWithTooltip;","import 'rc-slider/assets/index.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport Slider, { Range } from 'rc-slider';\nimport 'rc-slider/assets/index.css';\n\nconst createSliderWithTooltip = Slider.createSliderWithTooltip;\nconst SliderWithTooltip = createSliderWithTooltip(Slider);\nconst RangeWithTooltip = createSliderWithTooltip(Range);\n\nexport default function MySliders() {\n  return (\n    <div style={{ padding: 20, width: '80%', margin: '0 auto' }}>\n      <h3>Basic Slider</h3>\n      <Slider defaultValue={50} min={0} max={100} onChange={val => console.log('Slider value:', val)} />\n\n      <h3>Range Slider</h3>\n      <Range defaultValue={[20, 80]} min={0} max={100} onChange={vals => console.log('Range values:', vals)} />\n\n      <h3>Slider with Tooltip</h3>\n      <SliderWithTooltip defaultValue={30} min={0} max={100} tipFormatter={val => `${val}%`} />\n\n      <h3>Range with Tooltip</h3>\n      <RangeWithTooltip defaultValue={[10, 60]} min={0} max={100} tipFormatter={val => `${val} units`} />\n    </div>\n  );\n}","lang":"typescript","description":"Demonstrates the basic `Slider` and `Range` components, including how to import the necessary CSS and how to use the `createSliderWithTooltip` utility to add value tooltips to handles.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}