react-tick-slider

TickSlider

Primitives to build simple React tick slider components

---

The problem

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 solution

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.

Table of Contents

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

Installation

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.

Usage

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!"

Props

rootStyle

object | defaults to {}

This is an object with any inline styles you want applied to the root div.

options

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

value

number | defaults to null

This is the default tick selected.

onValueChange

function(value: number) | optional, no useful default

This return the value of the tick selected.

children

function

This is calls the render function and renders that.

Render Prop Function

actions

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

state

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

Inspiration

I was heavily inspired by Kent C. Dodds and this repository Awesome react render props.

Other Solutions

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

LICENSE

MIT