# Script.Aculo.Us Create Sliders - script.aculo.us

## what is Script.Aculo.Us Create sliders?

Sliders are thin tracks with one or extra handle on them that the user can drag along the tune

The goal of a slider is to offer an alternative input technique for defining a numerical cost; the slider represents a variety, and sliding a take care of along the tune defines a value within this range.

Sliders can be in either horizontal or vertical orientation. when horizontal, the left end of the music usually represents the lowest cost, while in a vertical orientation, the lowest of the slide is generally the lowest price.

To use script.aculo.us's slider abilities, you may need to load the slider.js module along side the prototype.js module. So your minimal loading for script.aculo.us will seem like this –

## Creating a Slider Control

developing a slider is, as ordinary, a count number of constructing a custom object over a few present elements on your page's DOM. you'll want elements here, one for the manage and one for the music as follows –

The tune element is mostly a , and the take care of element is a or inside the song detail. both may be surpassed either via their identity= or by using direct DOM references, as normal.

## Sliders options

you could use one or extra of the subsequent options even as growing your Slider object.

 Option Description Axis Defines the orientation of the control ashorizontalorvertical. The default orientation ishorizontal. Range Defines the range of the slider values as an instance of a Prototype ObjectRange instance. Defaults to 0 through 1. Values Defines the discrete set of values that the slider can acquire. If omitted, all values within the range can be set. sliderValue Sets the initial value of the slider. If omitted, the value represented by the leftmost (or top-most) edge of the slider is the initial value. Disabled If true, it creates a slide that is initially disabled. Obviously defaults to false. setValue Will update the slider's value and thus move the slider handle to the appropriate position. setDisabled Will set the slider to the disabled state (disabled = true). setEnabled Will set the slider to the enabled state (disabled = false).

You can provide the following callbacks in the options parameter

 Option Description onSlide Called whenever the Slider is moved by dragging. The called function gets the slider value 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 as its parameter.

## Points to note:

• You could change the slider photograph of any slider the use of CSS. Use CSS houses background-photo: url(music.gif) and background-repeat: no-repeat to set the slider photo.
• The variety cost may be distinct using $R(minValue, MaxValue). as an instance,$R(1, 100).
• The variety value can be laid out in phrases of particular values. for instance values: [1,25,50,75,100]. In this situation, the slider could simplest achieve the discrete values listed as the cope with changed into moved.
• At any time, the price of the slider can be set under software manage by calling the setValue() method of the slider example, as in: sliderInstance.setValue(50);

This will produce following result –