Slider

Controls > Slider

Introduction

A slider control which can be used to select a single or multiple values from a given range, or even set of values.

Syntax

To make a slider element, you create a new instance of class Control.Slider.


new Control.Slider('handles','track', [options]);

handles can either be a single id (or element) or, if you want more than one handle, an array of ids (or elements). track is either id or element.

Options

Option	Since	Default	Description
axis	V1.5	horizontal	Sets the direction that the slider will move in. It should either be horizontal or vertical.
increment	V1.5	1	Defines the relationship of value to pixels. Setting this to 1 will mean each movement of 1 pixel equates to 1 value.
maximum	V1.5	(none)	Length of track in pixels adjusted by increment. The maximum value that the slider will move to. For horizontal this is to the right while vertical it is down.
minimum	V1.5	0	The minimum value that the slider can move to. For horizontal this is to the left while vertical it is up. Note: this also sets the beginning of the slider (zeroes it out).
range	0	(none)	Use the $R(min,max)
alignX	V1.5	0	This will move the starting point on the x-axis for the handle in relation to the track. It is often used to move the ‘point’ of the handle to where 0 should be. It can also be used to set a different starting point on the track.
alignY	V1.5	0	This will move the starting point on the y-axis for the handle in relation to the track. It is often used to move the ‘point’ of the handle to where 0 should be. It can also be used to set a different starting point on the track.
sliderValue	V1.5	0	Will set the initial slider value. The handle will be set to this value, assuming it is within the minimum and maxium values.
disabled	V1.5	(none)	This will lock the slider so that it will not move and thus is disabled.
handleImage	V1.5	(none)	The id of the image that represents the handle. This is used to swap out the image src with disabled image src when the slider is enabled.
handleDisabled	V1.5	(none)	The id of the image that represents the disabled handle. This is used to change the image src when the slider is disabled.
values	V1.5	(none)	Accepts an array of integers. If set these will be the only legal values for the slider to be at. Thus you can set specific slider values that the user can move the slider to.
spans	??	(none)	An array of ids or elements which are positioned between handles. This is used only when slider has more than one handle.
restricted	??	false	Used only for multiple handles, when restricted is true, handle(s) with greater indexes are not allowed to have values less than handles with smaller indexes. When restricted is false, handles can be moved independently from others.

The slider control offers some functions to let javascript update its state:

Function	Parameters	Description
setValue	`value`, `handleIndex`	Will update the slider’s value and thus move the slider handle to the appropriate position. `handleIndex` is optional, when it is not passed then ‘active’ (last-dragged/used) handle is used. NOTE: when using setValue, the onChange callback function is called.
setDisabled	(none)	Will set the slider to the disabled state (disabled = true).
setEnabled	(none)	Will set the slider to the enabled state (disabled = false).

Additionally, the options parameter can take the following callback function:

Callback	Description
onSlide	Called whenever the Slider is moved by dragging. The called function gets the slider value (or array if slider has multiple handles) as its parameter.
onChange	Called whenever the Slider has finished moving or has had its value changed via the setSlider Value function. The called function gets the slider value (or array if slider has multiple handles) as its parameter.

With both of the above, using multiple handles causes an array of their respective values to be passed to the callback. Both receive the Slider object as a second paramater.

Examples

Single handle


// from the author's first demo of a vertical slider.  It begins disabled.
var s2 = new Control.Slider('slider_2', 'track_2', {
  axis:'vertical',
  minimum: 60,
  maximum: 288,
  alignX: -28,
  alignY: -5,
  disabled: true, 
  handleImage: 'slider_2handle',
  handleDisabled: 'images/vsliderhandle_gray.gif'
});

// example of a horizontal slider that allows only 4 possible values
var sliderLimited = new Control.Slider('slider_Limited', 'track_Limited', {
  minimum: 2,
  maximum: 30,
  increment: 9,
  alignX: -5,
  alignY: -5,
  values: [2, 10, 15, 30]
});

// Setting the callbacks later on
s2.options.onChange = function(value) {
  // ...
  $('height_value').update(value);
};

s2.options.onSlide = function(value) {
  // ...
  $('height_value').update(value);
};

Multiple handles


<div id="square_slider" class="slider">
  <div id="square_slider_handle_min" class="handle left"></div>
  <div id="square_slider_handle_max" class="handle right"></div>

  <div id="square_slider_span" class="span"></div>
</div>


var handles = ['square_slider_handle_min', 'square_slider_handle_max'];
var square_slider = new Control.Slider(handles, 'square_slider', {
    range: $R(0, 100),
    values: $R(0, 100),
    sliderValue: [20, 80],
    spans: ["square_slider_span"],
    restricted: true
});

Demo

Use the slider to resize the box

And this to change its color

Source Code of the Demo



<style type="text/css">
  div.slider { width:256px; margin:10px 0; background-color:#ccc; height:10px; position: relative; }
  div.slider div.handle { width:10px; height:15px; background-color:#f00; cursor:move; position: absolute; }

  div#zoom_element { width:50px; height:50px; background:#2d86bd; position:relative; }
</style>

<div class="demo">
  <p>Use the slider to resize the box</p>
  <div id="zoom_slider" class="slider">
    <div class="handle"></div>
  </div>

  <p>And this to change its color</p>
  <div id="rgb_slider" class="slider">
    <div class="handle" style="background-color: #f00;"></div>
    <div class="handle" style="background-color: #0f0;"></div>
    <div class="handle" style="background-color: #00f;"></div>
  </div>

  <div id="zoom_element"></div>
</div>

<script type="text/javascript">
  (function() {
    var zoom_slider = $('zoom_slider'),
        rgb_slider = $('rgb_slider'),
        box = $('zoom_element');

    new Control.Slider(zoom_slider.down('.handle'), zoom_slider, {
      range: $R(40, 160),
      sliderValue: 50,
      onSlide: function(value) {
        box.setStyle({ width: value + 'px', height: value + 'px' });
      },
      onChange: function(value) { 
        box.setStyle({ width: value + 'px', height: value + 'px' });
      }
    });

    new Control.Slider(rgb_slider.select('.handle'), rgb_slider, {
      range: $R(0, 255),
      sliderValue: [45, 134, 189],
      onSlide: function(values) {
        box.setStyle({ backgroundColor: "rgb("+ values.map(Math.round).join(',') +")" });
      },
      onChange: function(values) { 
        box.setStyle({ backgroundColor: "rgb("+ values.map(Math.round).join(',') +")" });
      }
    });
  })();
</script>

script.aculo.us