Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rc-slider-frank-weindel

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-slider-frank-weindel

slider ui component for react

  • 3.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

rc-slider


slider ui component for react

NPM version build status Test coverage gemnasium deps node version npm download Sauce Test Status

Sauce Test Status

Screenshots

Feature

  • support ie8,ie8+,chrome,firefox,safari

Keyboard

install

rc-slider

Usage

var React = require('react');
var ReactDOM = require('react-dom');
var Rcslider = require('rc-slider');
ReactDOM.render(<Rcslider />, container);

API

props

nametypedefaultdescription
classNameStringrc-sliderAdditional css class for the root dom node
minnumber0The minimum value of the slider
maxnumber100The maximum value of the slider
marksobject {number: string}{}Mark on the slider. The key determines the position, and the value determines what will show.
stepnumber or `null`1Value to be added or subtracted on each step the slider makes. Must be greater than zero. 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.
rangebooleanfalseDetermines the type of slider. If range is `true`, two handles will be rendered in order to select a range.
allowCrossbooleantrueWhen `range` is `true`, `allowCross` could be set as `true` to allow those two handles cross.
defaultValuenumber or [number, number]0 or [0, 0]Set initial positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number]`
valuenumber or [number, number]Set current positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number]`
includedbooleantrueIf the value is `true`, it means a continuous value interval, otherwise, it is a independent value.
disabledbooleanfalseIf `true`, handles can't be moved.
tipTransitionNamestring''Set the animation for tooltip if it shows.
tipFormatterfunction or `null`Format the value of the tooltip if it shows. If `null` the tooltip will always be hidden.
dotsboolfalseWhen the `step` value is greater than 1, you can set the `dots` to `true` if you want to render the slider with dots.
onChangefunctionNOOP`onChange` will be triggered while the value of Slider changing.
onAfterChangefunctionNOOP`onAfterChange` will be triggered when `ontouchend` or `onmouseup` is triggered.

Development

npm install
npm start

Example

http://localhost:8005/examples/

online example: 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.

Keywords

FAQs

Package last updated on 16 Dec 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc