Skip to content

I
i20rzslider
Commit 545231de authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Feature - Add a vertical option to display vertical sliders.

parent 8fc033b2
Expand all Show whitespace changes
Inline Side-by-side
Showing with 519 additions and 209 deletions
demo/demo.css
View file @ 545231de
......@@ -11,3 +11,10 @@ article { margin-bottom: 10px; }
.field-title {
width: 100px;
}
.vertical-sliders {
margin: 0;
}
.vertical-sliders > div {
height: 250px;
}
demo/demo.js
View file @ 545231de
......@@ -118,6 +118,66 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
//Vertical sliders
$scope.verticalSlider1 = {
value: 0,
options: {
floor: 0,
ceil: 10,
vertical: true
}
};
$scope.verticalSlider2 = {
minValue: 20,
maxValue: 80,
options: {
floor: 0,
ceil: 100,
vertical: true
}
};
$scope.verticalSlider3 = {
value: 5,
options: {
floor: 0,
ceil: 10,
vertical: true,
showTicks: true
}
};
$scope.verticalSlider4 = {
minValue: 1,
maxValue: 5,
options: {
floor: 0,
ceil: 6,
vertical: true,
showTicksValues: true
}
};
$scope.verticalSlider5 = {
value: 50,
options: {
floor: 0,
ceil: 100,
vertical: true,
showSelectionBar: true
}
};
$scope.verticalSlider6 = {
value: 6,
options: {
floor: 0,
ceil: 6,
vertical: true,
showSelectionBar: true,
showTicksValues: true,
ticksValuesTooltip: function(v) {
return 'Tooltip for ' + v;
}
}
};
//Read-only slider
$scope.read_only_slider = {
value: 50,
......
demo/index.html
View file @ 545231de
......@@ -115,6 +115,32 @@
></rzslider>
</article>
<article>
<h2>Vertical sliders</h2>
<div class="row vertical-sliders" style="margin: 20px;">
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider1.value" rz-slider-options="verticalSlider1.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue"
rz-slider-options="verticalSlider2.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider3.value" rz-slider-options="verticalSlider3.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue"
rz-slider-options="verticalSlider4.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider5.value" rz-slider-options="verticalSlider5.options"></rzslider>
</div>
<div class="col-md-2">
<rzslider rz-slider-model="verticalSlider6.value" rz-slider-options="verticalSlider6.options"></rzslider>
</div>
</div>
</article>
<article>
<h2>Disabled slider</h2>
<label>Disabled <input type="checkbox" ng-model="disabled_slider.options.disabled"></label>
......
dist/rzslider.css
View file @ 545231de
......@@ -162,3 +162,73 @@ rzslider .rz-ticks .tick .tick-value {
top: -30px;
transform: translate(-50%, 0);
}
rzslider.vertical {
position: relative;
width: 4px;
height: 100%;
padding: 0;
margin: 0 20px;
vertical-align: baseline;
}
rzslider.vertical .rz-base {
width: 100%;
height: 100%;
padding: 0;
}
rzslider.vertical .rz-bar-wrapper {
top: auto;
left: 0;
width: 32px;
height: 100%;
padding: 0 0 0 16px;
margin: 0 0 0 -16px;
}
rzslider.vertical .rz-bar {
bottom: 0;
left: initial;
width: 4px;
height: 100%;
}
rzslider.vertical .rz-pointer {
top: auto;
bottom: 0;
left: -14px !important;
}
rzslider.vertical .rz-bubble {
bottom: 0;
left: 16px !important;
margin-left: 3px;
}
rzslider.vertical .rz-bubble.rz-selection {
top: auto;
left: 16px !important;
}
rzslider.vertical .rz-ticks {
top: 0;
left: -3px;
z-index: 1;
width: auto;
height: 100%;
padding: 11px 0;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
rzslider.vertical .rz-ticks .tick {
vertical-align: middle;
}
rzslider.vertical .rz-ticks .tick .tick-value {
top: auto;
right: -30px;
transform: translate(0, -28%);
}
\ No newline at end of file
dist/rzslider.js
View file @ 545231de
This diff is collapsed.
dist/rzslider.min.css
View file @ 545231de
/*! angularjs-slider - v2.0.0 - (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-11-23 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .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 .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .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 .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 .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;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
/*! angularjs-slider - v2.0.0 - (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-11-24 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .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 .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .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 .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 .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;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)}rzslider.vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.vertical .rz-base{width:100%;height:100%;padding:0}rzslider.vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.vertical .rz-bar{bottom:0;left:initial;width:4px;height:100%}rzslider.vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.vertical .rz-ticks{top:0;left:-3px;z-index:1;width:auto;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}rzslider.vertical .rz-ticks .tick{vertical-align:middle}rzslider.vertical .rz-ticks .tick .tick-value{top:auto;right:-30px;transform:translate(0,-28%)}
\ No newline at end of file
dist/rzslider.min.js
View file @ 545231de
This diff is collapsed.
src/rzslider.js
View file @ 545231de
This diff is collapsed.
src/rzslider.less
View file @ 545231de
......@@ -9,10 +9,9 @@
@import 'variables.less';
rzslider {
display: inline-block;
position: relative;
height: @barHeight;
height: @barDimension;
width: 100%;
margin: 35px 0 15px 0;
vertical-align: middle;
......@@ -57,15 +56,15 @@ rzslider {
.rz-bar {
left: 0;
width: 100%;
height: @barHeight;
height: @barDimension;
z-index: 1;
background: @barNormalColor;
.rounded(@barHeight/2);
.rounded(@barDimension/2);
&.rz-selection {
z-index: 2;
background: @barFillColor;
.rounded(@barHeight/2);
.rounded(@barDimension/2);
}
}
......@@ -73,7 +72,7 @@ rzslider {
cursor: pointer;
width: @handleSize;
height: @handleSize;
top: -@handleSize/2 + @barHeight/2;
top: -@handleSize/2 + @barDimension/2;
background-color: @handleBgColor;
z-index: 3;
.rounded(@handleSize/2);
......@@ -118,7 +117,7 @@ rzslider {
width: 100%;
position: absolute;
left: 0;
top: -(@ticksHeight - @barHeight) / 2;
top: -(@ticksHeight - @barDimension) / 2;
margin: 0;
padding: 0 (@handleSize - @ticksWidth) / 2;
z-index: 1;
......@@ -147,4 +146,72 @@ rzslider {
}
}
}
&.vertical {
position: relative;
width: @barDimension;
height: 100%;
margin: 0 20px;
padding: 0;
vertical-align: baseline;
.rz-base {
width: 100%;
height: 100%;
padding: 0;
}
.rz-bar-wrapper {
top: auto;
left: 0;
margin: 0 0 0 -@handleSize / 2;
padding: 0 0 0 @handleSize / 2;
height: 100%;
width: @handleSize;
}
.rz-bar {
bottom: 0;
left: initial;
width: @barDimension;
height: 100%;
}
.rz-pointer {
left: -@handleSize/2 + @barDimension/2 !important;
top: auto;
bottom: 0;
}
.rz-bubble {
left: @handleSize/2 !important;
margin-left: 3px;
bottom: 0;
&.rz-selection {
left: @handleSize/2 !important;
top: auto;
}
}
.rz-ticks {
height: 100%;
width: auto;
left: -(@ticksHeight - @barDimension) / 2;
top: 0;
padding: (@handleSize - @ticksWidth) / 2 0;
z-index: 1;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
.tick {
vertical-align: middle;
.tick-value {
right: @ticksValuePosition;
top: auto;
transform: translate(0, -28%);
}
}
}
}
}
src/variables.less
View file @ 545231de
......@@ -25,4 +25,4 @@
@handleSize: 32px;
@handlePointerSize: 8px;
@bubblePadding: 1px 3px;
@barHeight: 4px;
\ No newline at end of file
@barDimension: 4px;
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