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.

• Installation
• Usage
• Props
  • rootStyle
  • options
  • value
  • onValueChange
  • children
• Render Prop Function
  • actions
  • state
• Inspiration
• Other Solutions
• LICENSE

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 and prop-types. Please make sure you have those installed as well.

Try it out in the browser

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:

number | defaults to null

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.

These are values that represent the current state of the tick-slider component.

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:

• react-compound-slider

MIT