Archived Repository The code of this repository was written during a Hack Day by a Marmelab developer. It's part of the distributed R&D effort at Marmelab, where each developer spends 2 days a month for learning and experimentation. This code is not intended to be used in production, and is not maintained. |
Primitives to build simple React tick slider components
You need an tick slider experience in your application and you want it to be accessible. You also want it to be simple and flexible to account for your use cases.
This is a component that controls user interactions and state for you so you can create tick slider components. It uses a render prop which gives you maximum flexibility with a minimal API because you are responsible for the rendering of everything and you simply apply props to what you're rendering.
This differs from other solutions which render things for their use case and then expose many options to allow for extensibility resulting in a bigger API that is less flexible as well as making the implementation more complicated and harder to contribute to.
This module is distributed via
npm which is bundled with
node and should be installed as one of your project's
dependencies
:
npm install --save react-tick-slider
This package also depends on
react
andprop-types
. Please make sure you have those installed as well.
import React from 'react'
import TickSlider from 'react-tick-slider'
<TickSlider
rootStyle={containerStyle}
options={[{label: 'value 1',value: 1}, {label: 'value 2',value: 2}]} // your tick
value={2} // default tick selected
onValueChange={handleValueChange}
>
{({ choices, selectedChoice, selectChoice }) => (
<Fragment>
<div className="slider">
...render your slider here
</div>
<CircleContainer>
{choices.map(choice => (
...render your tick here
))}
<div className="cricle">
...render your circle here
</div>
</CircleContainer>
</Fragment>
)}
</TickSlider>
is the only component. It doesn't render anything itself, it just calls the render function and renders that. "Use a render prop!"
object
| defaults to{}
This is an object with any inline styles you want applied to the root div.
array of object
| defaults to[]
This represent your tick. The object you are passed to generate your tick:
property | type | description |
---|---|---|
label | string/number | Tick label, you can use it in title or aria-label property |
value | number | Tick value |
number
| defaults tonull
This is the default tick selected.
function(value: number)
| optional, no useful default
This return the value
of the tick selected.
function
This is calls the render function and renders that.
These are functions you can call to change the state of the downshift component.
property | type | description |
---|---|---|
selectChoice | function(choice: object) | selects the selectedChoice and trigger onValueChange event |
These are values that represent the current state of the tick-slider component.
property | type | description |
---|---|---|
choices | object {label: string/number, value: number, position: number} | This is your ticks with multiple props |
selectedChoice | object {label: string/number, value: number, position: number} | This is tick selected |
I was heavily inspired by Kent C. Dodds and this repository Awesome react render props.
You can implement these other solutions using tick-slider
, but if you'd prefer
to use these out of the box solutions, then that's fine too:
MIT