Slider.md

<Slider>

Provides a "slider" behavior over any HTML element. Keeps state of weather user is currently sliding and current sliding position of the slider. Supports, both, mouse and touch events.

Usage

import {Slider} from 'libreact/lib/Slider';

<Slider>{(state) =>
  <div style={{
    width: 800,
    height: 80,
    border: '1px solid tomato'
  }}>
    <pre style={{fontFamily: 'monospace'}}>
      {JSON.stringify(state, null, 4)}
    </pre>
  </div>
}</Slider>

Props

Signature

interface ISliderProps {
  disabled?: boolean;
  onScrub?: (pos: number) => void;
  onScrubStart?: () => void;
  onScrubStop?: () => void;
  reverse?: boolean;
  value?: number;
  vertical?: boolean;
  throttle?: number;
}

, where

• disabled — optional, boolean, whether slider should respond to user input. Defaults to false.
• onScrub — optional, function, every time slider position is changed by user.
• onScrubStart — optional, function, called when user start sliding.
• onScrubStop — optional, function, called when user stops sliding.
• reverse — optional, boolean, whether slider value computation should be inverted. Defaults to false.
• value — optional, number, initial slider value. Defaults to 0.
• vertical — optional, boolean, whether to create vertical slider. Defaults to false.
• throttle — optional, number, time in milliseconds used to throttle events. Defaults to 50.

State

Render prop receives the state of slider, which has the following signature

interface ISliderState {
  isSliding?: boolean;
  value?: number;
  pos?: number;
  length?: number;
}

, where

• isSliding — whether user is currently scrubbing.
• value — current scrubbing value in range [0...1], only applicable when user is scrubbing.
• pos — pixel position of mouse inside the element.
• length — pixel size of the element.