Fetching contributors…
Cannot retrieve contributors at this time
74 lines (56 sloc) 1.94 KB


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.


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)}



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.


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.