hyperapp-slider

Slider/range component for Hyperapp.

Installation

npm install --save hyperapp-slider

Usage

import { h, app } from 'hyperapp';
import { Slider } from 'hyperapp-slider';

const state = {
    mySlider: Slider.state({min: 0, max: 100, value: 50, step: 1})
};

const actions = {
    mySlider: Slider.actions
};

const view = (state, actions) => (
    <div>
        <div>Value: {state.mySlider.value}</div>
        <Slider state={state.mySlider} actions={actions.mySlider} />
    </div>
);

app(state, actions, view, document.body);

There is no default styling. You can style based on the classes .slider, .slider__track, slider__fill and .slider__handle. Alternatively, you can passe your own "base" class with baseClass="my-slider" and get .my-slider, .my-slider__track, my-slider__fill and .my-slider__handle.

See example/index.html and example/index.js for a working example.

NOTE: don’t update values owned by hyperapp-slider manually, things will get out of sync.

Configuration

The slider is configured through the Slider.state function. It returns your configured state for the slider, and should be put in your global state object. It accepts the following properties.

Property	Type	Mandatory	Default	Explanation
min	Int	Yes		The minimum value
max	Int	Yes		The maximum value
value	Int	Yes		The initial value
step	Int/String	No	1	The value added or subtracted to value per tick. Set to a number for a discrete slider, or 'any' for a continuous slider

Development

• npm i
• npm run watch
• open http://localhost:1234