Show:
Extends View

A UI element that creates a slider controllable by mouse and touch events. A starting value and range is provided, and the user can change the value within the range by dragging and clicking on the slider. The slider has a .value property that defines its value as a stream.

This file comes with an associated CSS file slider.css

Constructor

UI.Slider

(
  • [options]
)

Parameters:

  • [options] Object optional

    Options

    • [value=0.5] Number optional

      Starting value

    • [range=[0,1]] Range of values ([min, max] Array optional

      )

    • [label] String optional

      Name of label

    • [precision=1] Number optional

      Number of decimal points to display

    • [transition=false] Object optional

      Default transition to animate values

Example:

 var slider = new Slider({
             value : 90,
             range : [0, 360],
             label : 'angle'
         });
        
         var rotation = slider.value.map(function(angle){
             return Transform.rotate(Math.PI * angle / 180);
         });
        
         context.add({transform : rotation}).add(surface);
         context.add(slider);

Item Index

Methods

Methods

get

() Number | Number[]

Return the current value of the slider.

Returns:

Number | Number[]:

Current state

set

(
  • value
  • [transition]
  • [callback]
)

Set a new end value with an optional transition. An optional callback can fire when the transition completes.

Parameters: