Skip to content

I
i20rzslider
Commit 837ca8b8 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Support ticks for range and always visible bars

parent d500b8e4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 98 additions and 38 deletions
bower.json
View file @ 837ca8b8
{
"name": "angularjs-slider",
"version": "0.1.33",
"version": "0.1.34",
"homepage": "https://github.com/rzajac/angularjs-slider",
"authors": [
"Rafal Zajac <rzajac@gmail.com>",
......
demo/index.html
View file @ 837ca8b8
......@@ -103,6 +103,26 @@
rz-slider-show-ticks-value="true"></rzslider>
</article>
<article>
<h2>Slider with ticks value and visible bar example</h2>
Value: {{ priceSlider6 | json }}
<rzslider rz-slider-model="priceSlider6"
rz-slider-floor="0"
rz-slider-ceil="10"
rz-slider-always-show-bar="true"
rz-slider-show-ticks-value="true"></rzslider>
</article>
<article>
<h2>Range Slider with ticks value example</h2>
Value: {{ priceSlider6 | json }}
<rzslider rz-slider-model="priceSlider7.min"
rz-slider-high="priceSlider7.max"
rz-slider-floor="0"
rz-slider-ceil="10"
rz-slider-show-ticks-value="true"></rzslider>
</article>
<article>
<h2>Draggable range example</h2>
Value:
......@@ -151,6 +171,11 @@
$scope.priceSlider3 = 250;
$scope.priceSlider4 = 5;
$scope.priceSlider5 = 5;
$scope.priceSlider6 = 5;
$scope.priceSlider7 = {
min: 2,
max: 8
};
$scope.translate = function(value) {
return '$' + value;
......
dist/rzslider.css
View file @ 837ca8b8
......@@ -128,10 +128,14 @@ rzslider .rz-ticks .tick {
height: 10px;
text-align: center;
cursor: pointer;
background: #666666;
background: #d8e0f3;
border-radius: 50%;
}
rzslider .rz-ticks .tick.selected {
background: #0db9f0;
}
rzslider .rz-ticks .tick .tick-value {
position: absolute;
top: -30px;
......
dist/rzslider.js
View file @ 837ca8b8
......@@ -4,7 +4,7 @@
* (c) Rafal Zajac <rzajac@gmail.com>
* http://github.com/rzajac/angularjs-slider
*
* Version: v0.1.33
* Version: v0.1.34
*
* Licensed under the MIT license
*/
......@@ -296,8 +296,6 @@ function throttle(func, wait, options) {
self.updateFloorLab();
self.initHandles();
if (!self.presentOnly) { self.bindEvents(); }
if(self.showTicks)
self.updateTicksScale();
});
// Recalculate slider view dimensions
......@@ -316,6 +314,7 @@ function throttle(func, wait, options) {
self.setMinAndMax();
self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
self.updateSelectionBar();
self.updateTicksScale();
if(self.range)
{
......@@ -329,6 +328,7 @@ function throttle(func, wait, options) {
self.setMinAndMax();
self.updateHighHandle(self.valueToOffset(self.scope.rzSliderHigh));
self.updateSelectionBar();
self.updateTicksScale();
self.updateCmbLabel();
}, 350, { leading: false });
......@@ -438,6 +438,7 @@ function throttle(func, wait, options) {
}
this.updateSelectionBar();
this.updateTicksScale();
},
/**
......@@ -605,8 +606,6 @@ function throttle(func, wait, options) {
this.getWidth(this.sliderElem);
this.sliderElem.rzsl = this.sliderElem[0].getBoundingClientRect().left;
if(this.showTicks)
this.updateTicksScale();
if(this.initHasRun)
{
......@@ -621,16 +620,27 @@ function throttle(func, wait, options) {
* @returns {undefined}
*/
updateTicksScale: function() {
if(!this.step) return; //if step is 0, the following loop will be endless.
var positions = '';
for (var i = this.minValue; i <= this.maxValue; i += this.step) {
positions += '<li class="tick">';
if(this.showTicksValue)
positions += '<span class="tick-value">'+ this.getDisplayValue(i) +'</span>';
positions += '</li>';
}
this.ticks.html(positions);
if(!this.showTicks) return;
if(!this.step) return; //if step is 0, the following loop will be endless.
var positions = '';
for (var i = this.minValue; i <= this.maxValue; i += this.step) {
var selectedClass = this.isTickSelected(i) ? 'selected': false;
positions += '<li class="tick '+ selectedClass +'">';
if(this.showTicksValue)
positions += '<span class="tick-value">'+ this.getDisplayValue(i) +'</span>';
positions += '</li>';
}
this.ticks.html(positions);
},
isTickSelected: function(value) {
var tickLeft = this.valueToOffset(value);
if(!this.range && this.alwaysShowBar && value <= this.scope.rzSliderModel)
return true;
if(this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
return true;
return false;
},
/**
......@@ -710,6 +720,7 @@ function throttle(func, wait, options) {
{
this.updateLowHandle(newOffset);
this.updateSelectionBar();
this.updateTicksScale();
if(this.range)
{
......@@ -722,6 +733,7 @@ function throttle(func, wait, options) {
{
this.updateHighHandle(newOffset);
this.updateSelectionBar();
this.updateTicksScale();
if(this.range)
{
......@@ -734,6 +746,7 @@ function throttle(func, wait, options) {
this.updateLowHandle(newOffset);
this.updateHighHandle(newOffset);
this.updateSelectionBar();
this.updateTicksScale();
this.updateCmbLabel();
},
......
dist/rzslider.min.css
View file @ 837ca8b8
/*! jusas-angularjs-slider - v0.1.33 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-10-02 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#666;border-radius:50%}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}
\ No newline at end of file
/*! jusas-angularjs-slider - v0.1.34 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-10-03 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}
\ No newline at end of file
dist/rzslider.min.js
View file @ 837ca8b8
This diff is collapsed.
package.json
View file @ 837ca8b8
{
"name": "jusas-angularjs-slider",
"version": "0.1.33",
"version": "0.1.34",
"description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
"main": "dist/rzslider.js",
"repository": {
......
src/rzslider.js
View file @ 837ca8b8
......@@ -4,7 +4,7 @@
* (c) Rafal Zajac <rzajac@gmail.com>
* http://github.com/rzajac/angularjs-slider
*
* Version: v0.1.33
* Version: v0.1.34
*
* Licensed under the MIT license
*/
......@@ -296,8 +296,6 @@ function throttle(func, wait, options) {
self.updateFloorLab();
self.initHandles();
if (!self.presentOnly) { self.bindEvents(); }
if(self.showTicks)
self.updateTicksScale();
});
// Recalculate slider view dimensions
......@@ -316,6 +314,7 @@ function throttle(func, wait, options) {
self.setMinAndMax();
self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
self.updateSelectionBar();
self.updateTicksScale();
if(self.range)
{
......@@ -329,6 +328,7 @@ function throttle(func, wait, options) {
self.setMinAndMax();
self.updateHighHandle(self.valueToOffset(self.scope.rzSliderHigh));
self.updateSelectionBar();
self.updateTicksScale();
self.updateCmbLabel();
}, 350, { leading: false });
......@@ -438,6 +438,7 @@ function throttle(func, wait, options) {
}
this.updateSelectionBar();
this.updateTicksScale();
},
/**
......@@ -605,8 +606,6 @@ function throttle(func, wait, options) {
this.getWidth(this.sliderElem);
this.sliderElem.rzsl = this.sliderElem[0].getBoundingClientRect().left;
if(this.showTicks)
this.updateTicksScale();
if(this.initHasRun)
{
......@@ -621,16 +620,27 @@ function throttle(func, wait, options) {
* @returns {undefined}
*/
updateTicksScale: function() {
if(!this.step) return; //if step is 0, the following loop will be endless.
var positions = '';
for (var i = this.minValue; i <= this.maxValue; i += this.step) {
positions += '<li class="tick">';
if(this.showTicksValue)
positions += '<span class="tick-value">'+ this.getDisplayValue(i) +'</span>';
positions += '</li>';
}
this.ticks.html(positions);
if(!this.showTicks) return;
if(!this.step) return; //if step is 0, the following loop will be endless.
var positions = '';
for (var i = this.minValue; i <= this.maxValue; i += this.step) {
var selectedClass = this.isTickSelected(i) ? 'selected': false;
positions += '<li class="tick '+ selectedClass +'">';
if(this.showTicksValue)
positions += '<span class="tick-value">'+ this.getDisplayValue(i) +'</span>';
positions += '</li>';
}
this.ticks.html(positions);
},
isTickSelected: function(value) {
var tickLeft = this.valueToOffset(value);
if(!this.range && this.alwaysShowBar && value <= this.scope.rzSliderModel)
return true;
if(this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
return true;
return false;
},
/**
......@@ -710,6 +720,7 @@ function throttle(func, wait, options) {
{
this.updateLowHandle(newOffset);
this.updateSelectionBar();
this.updateTicksScale();
if(this.range)
{
......@@ -722,6 +733,7 @@ function throttle(func, wait, options) {
{
this.updateHighHandle(newOffset);
this.updateSelectionBar();
this.updateTicksScale();
if(this.range)
{
......@@ -734,6 +746,7 @@ function throttle(func, wait, options) {
this.updateLowHandle(newOffset);
this.updateHighHandle(newOffset);
this.updateSelectionBar();
this.updateTicksScale();
this.updateCmbLabel();
},
......
src/rzslider.less
View file @ 837ca8b8
......@@ -22,7 +22,9 @@
@limitLabelTextColor: @labelTextColor;
@barFillColor: @handleBgColor;
@barNormalColor: #d8e0f3;
@ticksColor: #666;
@ticksColor: @barNormalColor;
@selectedTicksColor: @barFillColor;
@ticksWidth: 10px;
@ticksHeight: 10px;
@ticksValuePosition: -30px;
......@@ -147,6 +149,9 @@ rzslider .rz-ticks {
height: @ticksHeight;
background: @ticksColor;
border-radius: 50%;
&.selected {
background: @selectedTicksColor;
}
.tick-value {
position: absolute;
top: @ticksValuePosition;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment