React-custom-slider NPM

react-custom-slider

a very easy to use customizable slider for React
easy to use
no dependencies
flexible (few required parameters but highly customizable)

sliders

Install

npm install --save react-custom-slider

Usage

import React from 'react'

import Slider from 'react-custom-slider';

const App = () => {
  const [ value, setValue ] = React.useState(0);

  return(
    <div>
      <Slider
        value={value}
        markersSize={20}
        trackLength={250}
        markers={11}
        onChange={(value) => setValue(value)}
        valueRenderer={(value) => `${value}%`}
      />
    </div>
  )
};

export default App;

Props

Prop	Type	Description
`value`	number (required)	continuously updated value
`defaultValue`	number (required)	initial value
`showValue`	true, false, 'active'	displays current value on a label
`valueLabelColor`	string
`valueLabelActiveColor`	string
`valueLabelPadding`	number
`valueLabelStyle`	object	user custom style for value label
`min`	number	min slider value
`max`	number	max slider value
`stepSize`	number	interval between 2 steps (default is 1)
`disabled`	boolean
`disabledColor`	string	color used when the slider is disabled
`onChange`	function (callback)	called every time value changes ( value as argument)
`onRelease`	function (callback)	called once slider is released ( value as argument)
`valueRenderer`	function (callback)	used by value label (to display a unit such as %)
`trackLength`	number	track's height or width (depending on the orientation)
`trackColor`	string
`trackThickness`	number
`trackShape`	'squared', 'rounded'
`trackStyle`	object	user custom styling for track
`fillTrack`	boolean
`fillColor`	string
`handlerSize`	number	sets handler diameter (both width and height)
`handlerWidth`	number
`handlerHeight`	number
`handlerShape`	'squared', 'rounded'
`handlerColor`	string
`handlerBorderColor`
`handlerActiveColor`	string	handler color when slider is being used
`handlerStyle`	object	user custom styling for handler
`fontSize`	number	used by markers
`fontColor`	string	used by markers
`markers`	number	numbers of markers to display
`markersSize`	number	markers container's height or width (depending on the orientation)
`showMarkers`	true, false, 'hidden', 'active', 'inactive'	'active' displays the markers only when slider is beeing used, 'inactive' the opposite
`grabCursor`	boolean	when true shows a grabbing cursor as slider is beeing used
`vertical`	boolean	slider's layout horizontal or vertical
`invertMarkers`	boolean	switch slider and markers positions
`style`	object	user custom style for slider's root container