Skip to content
Permalink
Browse files

Align slider value to step. Fixes #5471 - value not aligned to step w…

…hen set programatically
  • Loading branch information
rdworth committed Apr 1, 2010
1 parent ab1f806 commit 5ffd3ab36a6c7d6c0aaad7d84c20b8d78c149a1f
Showing with 59 additions and 23 deletions.
  1. +37 −4 tests/unit/slider/slider_options.js
  2. +22 −19 ui/jquery.ui.slider.js
@@ -88,17 +88,50 @@ test("range", function() {
ok(false, "missing test - untested code is broken code.");
});

//spec: http://wiki.jqueryui.com/Slider#specs
// value option/method: the value option is not restricted by min/max/step.
// What is returned by the value method is restricted by min (>=), max (<=), and step (even multiple)
test("step", function() {
var el = $('<div></div>').slider({
step: 10
min: 0,
value: 0,
step: 10,
max: 100,
});
equals( el.slider("value"), 0 )
equals( el.slider("value"), 0 );

el.slider("value", 1);
equals( el.slider("value"), 0 );

el.slider("value", 9);
equals( el.slider("value"), 10 );
el.slider("value", 10);
equals( el.slider("value"), 10 );

el.slider("value", 11);
equals( el.slider("value"), 10 );

el.slider("value", 19);
equals( el.slider("value"), 20 );

el = $('<div></div>').slider({
min: 0,
value: 0,
step: 20,
max: 100,
});
el.slider("value", 0);

el.slider("option", "value", 1);
equals( el.slider("value"), 0 );

el.slider("option", "value", 9);
equals( el.slider("value"), 0 );

el.slider("option", "value", 11);
equals( el.slider("value"), 20 );

el.slider("option", "value", 19);
equals( el.slider("value"), 20 );

el.slider('destroy');
});

@@ -340,17 +340,9 @@ $.widget("ui.slider", $.ui.mouse, {
percentMouse = 1 - percentMouse;

var valueTotal = this._valueMax() - this._valueMin(),
valueMouse = percentMouse * valueTotal,
valueMouseModStep = valueMouse % this.options.step,
normValue = this._valueMin() + valueMouse - valueMouseModStep;

if (valueMouseModStep > (this.options.step / 2))
normValue += this.options.step;

// Since JavaScript has problems with large floats, round
// the final value to 5 digits after the decimal point (see #4124)
return parseFloat(normValue.toFixed(5));
valueMouse = percentMouse * valueTotal;

return this._trimAlignValue(valueMouse);
},

_start: function(event, index) {
@@ -440,7 +432,7 @@ $.widget("ui.slider", $.ui.mouse, {
value: function(newValue) {

if (arguments.length) {
this.options.value = this._trimValue(newValue);
this.options.value = this._trimAlignValue(newValue);
this._refreshValue();
this._change(null, 0);
}
@@ -452,7 +444,7 @@ $.widget("ui.slider", $.ui.mouse, {
values: function(index, newValue) {

if (arguments.length > 1) {
this.options.values[index] = this._trimValue(newValue);
this.options.values[index] = this._trimAlignValue(newValue);
this._refreshValue();
this._change(null, index);
}
@@ -461,7 +453,7 @@ $.widget("ui.slider", $.ui.mouse, {
if ($.isArray(arguments[0])) {
var vals = this.options.values, newValues = arguments[0];
for (var i = 0, l = vals.length; i < l; i++) {
vals[i] = this._trimValue(newValues[i]);
vals[i] = this._trimAlignValue(newValues[i]);
this._change(null, i);
}
this._refreshValue();
@@ -528,9 +520,9 @@ $.widget("ui.slider", $.ui.mouse, {

_value: function() {
//internal value getter
// _value() returns value trimmed by min and max
// _value() returns value trimmed by min and max, aligned by step
var val = this.options.value;
val = this._trimValue(val);
val = this._trimAlignValue(val);

return val;
},
@@ -542,30 +534,41 @@ $.widget("ui.slider", $.ui.mouse, {

if (arguments.length) {
var val = this.options.values[index];
val = this._trimValue(val);
val = this._trimAlignValue(val);

return val;
} else {
// .slice() creates a copy of the array
// this copy gets trimmed by min and max and then returned
var vals = this.options.values.slice();
for (var i = 0, l = vals.length; i < l; i++) {
vals[i] = this._trimValue(vals[i]);
vals[i] = this._trimAlignValue(vals[i]);
}

return vals;
}

},

_trimValue: function(val) {
// returns the step-aligned value that val is closest to, between (inclusive) min and max
_trimAlignValue: function(val) {
if (val < this._valueMin()) {
return this._valueMin();
}
if (val > this._valueMax()) {
return this._valueMax();
}
return val;
var step = this.options.step,
valModStep = val % step,
alignValue = this._valueMin() + val - valModStep;

if (valModStep >= (step / 2)) {
alignValue += step;
}

// Since JavaScript has problems with large floats, round
// the final value to 5 digits after the decimal point (see #4124)
return parseFloat(alignValue.toFixed(5));
},

_valueMin: function() {

0 comments on commit 5ffd3ab

Please sign in to comment.
You can’t perform that action at this time.