Skip to content

Commit

Permalink
Merge pull request nitinhayaran#48 from nitinhayaran/dev
Browse files Browse the repository at this point in the history 
Added support for snapping slider to step values
  • Loading branch information
@nitinhayaran
nitinhayaran committed Dec 8, 2015
2 parents 2d59ae2 + f08e237 commit f7bc8f0
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 19 deletions.
37 changes: 25 additions & 12 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,15 @@ <h3>Play around with the demo</h3>
from: 0,
to: 100,
step: 1,
scale: [0,25,50,75,100],
scale: [0,2,4,6,8,10],
format: '%s',
width: 300,
showLabels: true
showLabels: true,
snap: true
});</code></pre>
</div>
<div class="demo-output">
<input class="single-slider" type="hidden" value="25"/>
<input class="single-slider" type="hidden" value="2"/>
</div>
</div>
<div class="demo-section">
Expand All @@ -57,15 +58,16 @@ <h3>Play around with the demo</h3>
from: 0,
to: 100,
step: 1,
scale: [0,25,50,75,100],
scale: [0,2,4,6,8,10],
format: '%s',
width: 300,
showLabels: true,
isRange : true
isRange : true,
snap: true
});</code></pre>
</div>
<div class="demo-output">
<input class="range-slider" type="hidden" value="25,75"/>
<input class="range-slider" type="hidden" value="2,7"/>
</div>
</div>

Expand Down Expand Up @@ -179,6 +181,15 @@ <h3>See configuration options</h3>
<code>Default : false</code>
<p>True if this is a range selector. If its a range the value of hidden input will be set comma-seperated, e.g., "25,75"</p>
</td>
</tr>
<tr>
<td>snap</td>
<td>Optional</td>
<td>Boolean</td>
<td>
<code>Default : false</code>
<p>True to snap slider to step values</p>
</td>
</tr>
<tr>
<td>disable</td>
Expand Down Expand Up @@ -236,22 +247,24 @@ <h3>See configuration options</h3>
$(document).ready(function(){
$('.single-slider').jRange({
from: 0,
to: 100,
to: 10,
step: 1,
scale: [0,25,50,75,100],
scale: [0,2,4,6,8,10],
format: '%s',
width: 300,
showLabels: true
showLabels: true,
snap: true
});
$('.range-slider').jRange({
from: 0,
to: 100,
to: 10,
step: 1,
scale: [0,25,50,75,100],
scale: [0,2,4,6,8,10],
format: '%s',
width: 300,
showLabels: true,
isRange : true
isRange : true,
snap: true
});
});
</script>
Expand Down
2 changes: 1 addition & 1 deletion jquery.range-min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

41 changes: 35 additions & 6 deletions jquery.range.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
format: '%s',
theme: 'theme-green',
width: 300,
disable: false
disable: false,
snap: false
},
template: '<div class="slider-container">\
<div class="back-bar">\
Expand Down Expand Up @@ -71,7 +72,8 @@
console.log('jRange : no width found, returning');
return;
} else {
this.domNode.width(this.options.width || this.inputNode.width());
this.options.width = this.options.width || this.inputNode.width();
this.domNode.width(this.options.width);
this.inputNode.hide();
}

Expand Down Expand Up @@ -139,8 +141,13 @@
if (this.isSingle())
this.setPosition(this.pointers.last(), x, true, true);
else {
var pointer = Math.abs(parseInt(this.pointers.first().css('left'), 10) - x + this.pointers.first().width() / 2) < Math.abs(parseInt(this.pointers.last().css('left'), 10) - x + this.pointers.first().width() / 2) ?
this.pointers.first() : this.pointers.last();
var leftPos = parseInt(this.pointers.first().css('left'), 10),
rightPos = parseInt(this.pointers.last().css('left'), 10),
width = this.pointers.first().width() / 2,
pointer = this.pointers.first();
if ( x > rightPos || Math.abs(leftPos - x + width) > Math.abs(rightPos - x + width) ){
pointer = this.pointers.last();
}
this.setPosition(pointer, x, true, true);
}
},
Expand All @@ -164,6 +171,14 @@
if (!isPx) {
position = this.prcToPx(position);
}
if(this.options.snap){
var expPos = this.correctPositionForSnap(position);
if(expPos === -1){
return;
}else{
position = expPos;
}
}
if (pointer[0] === this.highPointer[0]) {
highPos = Math.round(position - circleWidth);
} else {
Expand All @@ -184,9 +199,23 @@
this.showPointerValue(pointer, position, animate);
this.isReadonly();
},
correctPositionForSnap: function(position){
var currentValue = this.positionToValue(position) - this.options.from;
var diff = this.options.width / (this.interval / this.options.step),
expectedPosition = (currentValue / this.options.step) * diff;
if( position <= expectedPosition + diff / 2 && position >= expectedPosition - diff / 2){
return expectedPosition;
}else{
return -1;
}
},
// will be called from outside
setValue: function(value) {
var values = value.toString().split(',');
values[0] = Math.min(Math.max(values[0], this.options.from), this.options.to) + '';
if (values.length > 1){
values[1] = Math.min(Math.max(values[1], this.options.from), this.options.to) + '';
}
this.options.value = value;
var prc = this.valuesToPrc(values.length === 2 ? values : [0, values[0]]);
if (this.isSingle()) {
Expand Down Expand Up @@ -264,7 +293,7 @@
}
}
if (this.inputNode.val() !== this.options.value) {
this.inputNode.val(this.options.value);
this.inputNode.val(this.options.value).change();
this.options.onstatechange.call(this, this.options.value);
}
},
Expand Down Expand Up @@ -332,4 +361,4 @@
return result || this;
};

})(jQuery, window, document);
})(jQuery, window, document);

0 comments on commit f7bc8f0

Please sign in to comment.