React-Slider v9.7.5: React Slider

icon
Latest Release: v9.7.5
  • Update package.json 08af0b2
  • Fix pushable type (#713) 74788ce
  • Fixed aria text formatter types (#801) 68e06cf

https://github.com/react-component/slider/compare/v9.7.4...v9.7.5

Source code(tar.gz)
Source code(zip)

rc-slider


Slider UI component for React

NPM version build status Test coverage Dependencies DevDependencies npm download bundle size

Install

rc-slider

Usage

import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';

export default () => (
  <>
    <Slider />
    <Range />
  </>
);

Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

API

createSliderWithTooltip(Slider | Range) => React.Component

An extension to make Slider or Range support Tooltip on handle.

const Slider = require('rc-slider');
const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);

Online demo

After Range or Slider was wrapped by createSliderWithTooltip, it will have the following props:

Name Type Default Description
tipFormatter (value: number): React.ReactNode value => value A function to format tooltip's overlay
tipProps Object {
placement: 'top',
prefixCls: 'rc-slider-tooltip',
overlay: tipFormatter(value)
}
A function to format tooltip's overlay

Common API

The following APIs are shared by Slider and Range.

Name Type Default Description
className string '' Additional CSS class for the root DOM node
min number 0 The minimum value of the slider
max number 100 The maximum value of the slider
marks {number: ReactNode} or{number: { style, label }} {} Marks on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains style and label properties.
step number or null 1 Value to be added or subtracted on each step the slider makes. Must be greater than zero, and max - min should be evenly divisible by the step value.
When marks is not an empty object, step can be set to null, to make marks as steps.
vertical boolean false If vertical is true, the slider will be vertical.
handle (props) => React.ReactNode A handle generator which could be used to customized handle.
included boolean true If the value is true, it means a continuous value interval, otherwise, it is a independent value.
reverse boolean false If the value is true, it means the component is rendered reverse.
disabled boolean false If true, handles can't be moved.
dots boolean false When the step value is greater than 1, you can set the dots to true if you want to render the slider with dots.
onBeforeChange Function NOOP onBeforeChange will be triggered when ontouchstart or onmousedown is triggered.
onChange Function NOOP onChange will be triggered while the value of Slider changing.
onAfterChange Function NOOP onAfterChange will be triggered when ontouchend or onmouseup is triggered.
minimumTrackStyle Object please use trackStyle instead. (only used for slider, just for compatibility , will be deprecate at [email protected] )
maximumTrackStyle Object please use railStyle instead (only used for slider, just for compatibility , will be deprecate at [email protected])
handleStyle Array[Object] | Object [{}] The style used for handle. (both for slider(Object) and range(Array of Object), the array will be used for multi handle following element order)
trackStyle Array[Object] | Object [{}] The style used for track. (both for slider(Object) and range(Array of Object), the array will be used for multi track following element order)
railStyle Object {} The style used for the track base color.
dotStyle Object {} The style used for the dots.
activeDotStyle Object {} The style used for the active dots.

Slider

Name Type Default Description
defaultValue number 0 Set initial value of slider.
value number - Set current value of slider.
startPoint number undefined Track starts from this value. If undefined, min is used.
tabIndex number 0 Set the tabIndex of the slider handle.
ariaLabelForHandle string - Set the aria-label attribute on the slider handle.
ariaLabelledByForHandle string - Set the aria-labelledby attribute on the slider handle.
ariaValueTextFormatterForHandle (value) => string - A function to set the aria-valuetext attribute on the slider handle. It receives the current value of the slider and returns a formatted string describing the value. See WAI-ARIA Authoring Practices 1.1 for more information.

Range

Name Type Default Description
defaultValue number[] [0, 0] Set initial positions of handles.
value number[] Set current positions of handles.
tabIndex number[] [0, 0] Set the tabIndex of each handle.
ariaLabelGroupForHandles Array[string] - Set the aria-label attribute on each handle.
ariaLabelledByGroupForHandles Array[string] - Set the aria-labelledby attribute on each handle.
ariaValueTextFormatterGroupForHandles Array[(value) => string] - A function to set the aria-valuetext attribute on each handle. It receives the current value of the slider and returns a formatted string describing the value. See WAI-ARIA Authoring Practices 1.1 for more information.
count number 1 Determine how many ranges to render, and multiple handles will be rendered (number + 1).
allowCross boolean true allowCross could be set as true to allow those handles to cross.
pushable boolean or number false pushable could be set as true to allow pushing of surrounding handles when moving a handle. When set to a number, the number will be the minimum ensured distance between handles. Example:

Development

npm install
npm start

Example

npm start and then go to http://localhost:8005/examples/

Online examples: http://react-component.github.io/slider/

Test Case

http://localhost:8005/tests/runner.html?coverage

Coverage

http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage

License

rc-slider is released under the MIT license.

Comments

  • chore(deps-dev): bump @types/react from 16.14.11 to 17.0.15
    chore(deps-dev): bump @types/react from 16.14.11 to 17.0.15

    Jul 26, 2021

    Bumps @types/react from 16.14.11 to 17.0.15.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    dependencies 
    Reply
  • SyntaxError: Unexpected token '.'
    SyntaxError: Unexpected token '.'

    Aug 17, 2021

    Hey. I've done all the thing I have to done. But seems like I'm getting the same error on my server.

    `/home/krofton/Development/navisgo/node_modules/rc-slider/assets/index.css:1 .rc-slider { ^

    SyntaxError: Unexpected token '.' at wrapSafe (internal/modules/cjs/loader.js:979:16) at Module._compile (internal/modules/cjs/loader.js:1027:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.require (/home/krofton/Development/navisgo/build/external "@babel/runtime/helpers/typeof":1:18) at a (/home/krofton/Development/navisgo/build/webpack/bootstrap:9:5)`

    Please help. :)

    I've done it this way:

    import Slider, { Range, SliderTooltip } from 'rc-slider'; const { Handle } = Slider; import 'rc-slider/assets/index.css';

    Reply
  • Changelog does not indicate breaking changes
    Changelog does not indicate breaking changes

    Aug 25, 2021

    I am assuming this slider component uses semantic versioning so that a major release indicates a breaking change. I skimmed the changelog and also the releases and I could find no mention of what the breaking change for version nine was. Is there any at all?

    I think the release naming strategy should be mentioned in the README so that people know whether you are semver compatible or not. Also, in case you are, add the breaking changes when moving up a major version.

    Reply
  • The `handle` & `track` goes out while ensuring value precision
    The `handle` & `track` goes out while ensuring value precision

    Sep 11, 2021

    Given min=-2.5 max=2.5 step=1, ensureValuePrecision on edge values (min or max), it gives value out of scope like -3 and 3.

    Reply
  • fix(utils): fix `ensureValuePrecision` to make sure value is always within range (min, max)
    fix(utils): fix `ensureValuePrecision` to make sure value is always within range (min, max)

    Sep 11, 2021

    fixes #797

                                                                                                                                                                                                           
    Reply
  • Disable keyboard events
    Disable keyboard events

    Sep 11, 2021

    Hello, the sliders have some default keyboard behaviors that I don't want, can you please add an option to disable them?

    For example, pressing "ArrowRight" or "ArrowUp" increments the value up, and pressing "ArrowLeft" or "ArrowDown" decrements the value. I have two sliders such that I want "ArrowRight/ArrowLeft" to only affect one and "ArrowUp/ArrowDown" to affect the other. However, when the slider is focused the default behaviors override my own.

    Reply
  • pushable has incorrect typing?
    pushable has incorrect typing?

    Oct 1, 2021

    The title could be incorrect, but on the (maybe unofficial?) documentation, it says that "pushable" can be of type boolean or number. It is also present in the examples. However, looking in my download, in rc-slider/lib/common/Range.d.ts, pushable is boolean only. How do i achieve the affect of having a minimum distance between to points and having them pushable?

    Here is the link to the documentation, and here is the link to the demo I found. I'm not sure if theyre official sources, because they seem to be outdated.

    Reply
  • reverse property not working for rc-slider
    reverse property not working for rc-slider

    Nov 16, 2021

    Hi,

    I tried a basic rc-slider in codesandbox and the reverse function is not working, there is no movement in the slider track position and also the direction is not changing. please check below link and help on how to fix this

    https://codesandbox.io/s/rc-slider-test-forked-7qhu3?file=/src/index.js

    Reply
  • Unable to preventDefault inside passive event listener invocation.
    Unable to preventDefault inside passive event listener invocation.

    Jan 4, 2022

    Hello, i noticed this is fired ( along a warning regarding findDomNode ) when scrolling. Mobile only

    Reply
  • Show tooltip on hover for marks not just handle
    Show tooltip on hover for marks not just handle

    Jan 4, 2022

    Is there a way to display a tooltip for each mark on a slider? I have a slider and the value of each point updates the page content rendered below, is there a way to add a tooltip that is displayed when hovering each mark?

    Reply
  • fix: keep tooltip align with handle when dragging
    fix: keep tooltip align with handle when dragging

    Oct 14, 2020

    close https://github.com/react-component/slider/issues/693

    Reply
  • Not accessible
    Not accessible

    Aug 5, 2016

    My project team is considering adopting this component. After a brief review I noticed that the component isn't accessible at all: For example, there are no focusable elements, and accordingly, no way to interact with the keyboard. It apparently handles both mouse and touch events, but ignores pointer events.

    Making the handle focusable is rather trivial, by adding tabindex=0 (see jQuery UI slider widget). Handling keyboard events isn't terrible either (see jQuery UI slider widget, _handleEvents). Switching from mouse+touch events to pointer events would require a polyfill like PEP but should actually simplify the code inside the component. There's probably more that I'm missing.

    That said, is there interest addressing this?

    Feature 
    Reply
  • CSS not included in dist package
    CSS not included in dist package

    May 18, 2017

    The latest version no longer include assets folder in the package

    tested at version 7.0.8

    it moves to /dist folder now, not sure this is expected as the documentation still points us to the assets folder.

    Reply
  • Bugfix/keep pushable
    Bugfix/keep pushable

    Aug 9, 2017

    trace: #159 when check the values in componentWillReceiveProps function, you use map but no index or Corresponding handle. The handle will be always what you are move.
    Then it invoke ensureValueNotConflict function, but ensureValueNotConflict just return prev or next handle value. (I think it should in consideration of thershold)

    So the gap of pushable not work when allowCross=false and set the value props (to update the display at each state)

    I just do it. but maybe someone has more elegant code. Many places invoke trimAlignValue func, so it may not index and nextProps args sometimes.

    base issue #159 , after fixed, I make some examples: all examples I set pushable={10} and allowCross={false}

    pushable

    pushable2

    bug 
    Reply
  • rc-tooltip in a react bootstrap Modal
    rc-tooltip in a react bootstrap Modal

    May 30, 2017

    Hi, I got a issue when using the rc-tooltip in a react bootstrap Modal whereby the tooltip is behind the modal and therefore not visible. Any idea on how to fix that?

    help wanted 
    Reply
  • Slider - cannot be used as a JSX component.
    Slider - cannot be used as a JSX component.

    Jun 3, 2020

    Version

    • rc-slider: @9.3.0
    • node: v10.16.0
    • npm: 6.9.0
    • Browser: chrome

    Steps to reproduce

    • import Slider from 'rc-slider';
    • use it as controlled component like
    <Slider value={value} onChange={handleSliderChange} />
    

    What is actually happening?

    • it posts errors like that
    error TS2607: JSX element class does not support attributes because it does not have a 'props' property.
    error TS2786:'Slider' cannot be used as a JSX component.
       Its instance type '{ [x: string]: any; componentDidMount(): void; componentWillUnmount(): void; onMouseDown: (e: any) => void; onTouchStart: (e: any) => void; onFocus: (e: any) => void; onBlur: (e: any) => void; onMouseUp: () => void; ... 16 more ...; render(): Element; }' is not a valid JSX element.
       Type '{ [x: string]: any; componentDidMount(): void; componentWillUnmount(): void; onMouseDown: (e: any) => void; onTouchStart: (e: any) => void; onFocus: (e: any) => void; onBlur: (e: any) => void; onMouseUp: () => void; ... 16 more ...; render(): Element; }' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.
    
    Reply
  • Basic example doesn't even work
    Basic example doesn't even work

    Dec 9, 2015

    I'm on the latest version: 3.1.4 with [email protected]

    I can't get a simple basic slider to work without getting the following error:

    Cannot read property 'toFixed' of undefined

    Any clue what's this about? I need to apparently set the marks props... but that won't make it a basic slider right?

    Reply
  • Basic slider accessibility
    Basic slider accessibility

    Jun 15, 2017

    As promptly discussed in issue #131, I created some basic accessibility for the Slider. I implemented the keyboard behaviour as my personal best guess of how it should work.

    Note, this is a work in progress but I wanted to share my changes already.

    Feature 
    Reply
  • Slider gets stuck to mouse
    Slider gets stuck to mouse

    Mar 23, 2017

    Hi, Sometimes the slider gets stuck to mouse and the slider just follows the movement of the cursor.

    Its hard to reproduce the issue and only way to resolve is to reload the page.

    bug help wanted 
    Reply
  • feat: Added reverse feature
    feat: Added reverse feature

    Sep 13, 2018

    There are many cases in which we need inverted/reversed sliders (#216 - #235 - #183 - #86). One important case is for RTL websites. The inverted feature is more general than RTL which can also be used for vertical sliders.

    There was a previous pull request trying to add this feature (#334), which had several problems:

    • It did not include correct keyboard listeners:
      • in the horizontal inverted slider, the right/left keys should subtract/add
      • in the vertical inverted slider, the up/bottom arrow keys should subtract/add
    • The values were not updated correctly:
      • In the inverted component, the value of the right side (top in vertical) is the starting value.
      • The ratio and relative value should be calculated from the width of component (which was subtracted by constant value 100, in that pull request).

    As a result, I created this pull request to handle this feature by simply adding an inverted prop: <Slider reverse />

    Reply