@woby/slider

Ported from React-Rangeslider

Installation

Using npm (use --save to include it in your package.json)

$ npm install @woby/slider --save

Using yarn (this command also adds @woby/slider to your package.json dependencies)

$ yarn add @woby/slider

Getting Started

@woby/slider is bundled with a slider component & default styles which can be overridden depending on your design requirements.

With a module bundler like webpack that supports either CommonJS or ES2015 modules, use as you would anything else:

// Using an ES6 transpiler like Babel
import { Slider } from '@woby/slider'
import '@woby/slider/lib/index.css'

// Not using an ES6 transpiler
var Slider = require('@woby/slider')
import '@woby/slider/lib/index.css'

The slider component comes with a default css file which you can include in your project:

<script src="https://unpkg.com/@woby/slider/umd/rangeslider.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@woby/slider/umd/rangeslider.min.css" />

Check out docs & examples.

Basic Example

import { $, $$, useEffect, type JSX } from 'woby'
import { Slider } from '@woby/slider"

function Horizontal() {
    // Initialize the state value
    const value = $<number>(10)

    // Event handler for the change event start
    const handleChangeStart = () => {
        console.log("Change event started")
    }

    // Event handler for the change event completion
    const handleChangeComplete = () => {
        console.log("Change event completed")
    }

    useEffect(() => console.log($$(value)))
    return (
        <div class="slider">
            <Slider
                min={0}
                max={100}
                value={value}
                onChangeStart={handleChangeStart}
                onChange={value}
                onChangeComplete={handleChangeComplete}
            />
            <div class="value">{value}</div>
        </div>
    )
}

export default Horizontal

API

Rangeslider is bundled as a single component, that accepts data and callbacks only as props.

Component

import Slider from '@woby/slider'

// inside render
<Slider
  min={Number}
  max={Number}
  step={Number}
  value={Number}
  orientation={String}
  reverse={Boolean}
  tooltip={Boolean}
  labels={Object}
  handleLabel={String}
  format={Function}
  onChangeStart={Function}
  onChange={Function}
  onChangeComplete={Function}
/>

Props

Prop | Type | Default | Description --------- | ------- | ------- | ----------- min | number | 0 | minimum value the slider can hold max | number | 100 | maximum value the slider can hold step | number | 1 | step in which increments/decrements have to be made value | number | | current value of the slider orientation | string | horizontal | orientation of the slider tooltip | boolean | true | show or hide tooltip reverse | boolean | false | reverse direction of vertical slider (top-bottom) labels | object | {} | object containing key-value pairs. { 0: 'Low', 50: 'Medium', 100: 'High'} handleLabel | string | '' | string label to appear inside slider handles format | function | | function to format and display the value in label or tooltip onChangeStart | function | | function gets called whenever the user starts dragging the slider handle onChange | function | | function gets called whenever the slider handle is being dragged or clicked onChangeComplete | function | | function gets called whenever the user stops dragging the slider handle.

Development

To work on the project locally, you need to pull its dependencies and run npm start.

$ npm install
$ npm start

Issues

Feel free to contribute. Submit a Pull Request or open an issue for further discussion.

License

MIT