<input type="text" id="myinput">
<div class='uislider' id="myslider" style="width: 410px;"
ui:input="myinput" ui:minvalue="0" ui:maxvalue="100">
UI.Slider is a rich UI component that allows the user to select a value from a predefined range.
Optionally you can link the slider to a <input>, to change the input value when the slider is moved and viceversa.
The Slider API is pretty simple. You can get and set the value, and link an input to the slider. See the following API Reference for details.
TODO: Fix the redundancy in steps and valueMapperFunctions!
UI.Slider(element, steps=101, valueMapperFunctions=null, linkedInput=null):
Creates a slider wrapping the <div> element $(element). steps and valueMapperFunctions are the initial values for the properties UI.Slider.prototype.steps and UI.Slider.prototype.valueMapperFunctions. But if valueMapperFunctions is null the initial value will be UI.Slider.ValueMappers.range(0, 100, 1). The linkedInput is passed to the UI.Slider.prototype.linkWithInput method.
UI.Slider(element, minValue=0, maxValue=100, linkedInput=null):
Compability with UI4W 0.5.x. And it's a simpler way to write this:
new UI.Slider(elements, maxValue - minValue + 1, [partial(operator.add, minValue), partial(operator.add, -minValue)] linkedInput)
The <div> element wrapped by this slider. Read-Only.
UI.Slider.prototype.minValue, UI.Slider.prototype.maxValue:
Compatibility with UI4W 0.5.x. The minimum and maximum value for the slider value range. Deprecated.
The current slider value. Read-Only, use the UI.Slider.prototype.setValue(value) method to change this property.
The current slider value. Read-Only, use the UI.Slider.prototype.setStep(value) method to change this property.
UI.Slider.prototype.valueMapperFunctions:
Array of two functions, used to map slider 'steps' to meaningful values. The first function should receive a step value and return the slider value. The second is the inverse of that, receiving a value and returning the corresponding step.
There are some useful generators to this pair of function in mochiref:UI.Slider.ValueMappers.
UI.Slider.prototype.draggable:
The Draggable::UI.Draggable instance used by the slider. Use with caution. Read-Only.
UI.Slider.prototypr.tipFormatter:
A function to format the value to be shown on the tip.
Fired when the slider value changes. Be careful, this signal can be fired many times in short intervals.
UI.Slider.prototype.setStep(step):
Moves the slider to the position corresponding to the step step .
UI.Slider.prototype.setValue(value):
Moves the slider to the position corresponding to the value value .
UI.Slider.prototype.linkWithInput(inputElement):
'Links' the slider and the input element inputElement. When the slider values changes, the input will be update with the new value. And if the input value changes, the slider will move accordingly.
Current limitation: Only one input can be linked to the slider. Linking another can produce unexpected behaviour [FIXME!]
Contains some useful functions to construct the value mappers required by mochiref:UI.Slider. See mochiref:UI.Slider.prototype.valueMapperFunctions.
mochidef:UI.Slider.ValueMappers.range(minValue, maxValue, by=1):
Makes a pair of mappers for the values between minValue and maxValue. A by parameter can be specified to get stepped values.
mochidef:UI.Slider.ValueMappers.values(x, y, z....):
Makes a pair of mappers for the values specified as arguments.
Sliders are tipically constructed via HTML, using simple divs to declare them:
<div class="uislider" ui:minValue="<number>" ui:maxValue="<number>"
ui:step="<number>" ui:input="<string-with-an-input-id>"
style="width:<number>px"></div>
<div class="uislider"> elements may include the ui:minValue, ui:maxValue, `ui:step special attributes indicating the range for the slider values.
Alternatively, the ui:values can specify a strict list of values for the slider, as shown below:
<div class="uislider" ui:values="<array-of-values>"
ui:input="<string-with-an-input-id>"
style="width:<number>px"></div>
ui:input is also optional and contains the id of an <input> element to link the slider with (See UI.Slider.prototype.linkWithInput).
Note that this element must have a width using 'px' as the unit. The width can be given on the style attributes (as in the example), or via CSS. Anyway, after the document is loaded, the slider must have a width.
Copyright 2005-2006 Leonardo Soto M. <leo.soto@gmail.com> and Imagemaker IT <http://www.imagemaker.cl>.
This program is licensed under the CDDL v1.0 license, see http://www.sun.com/cddl/cddl.html.