Skip to content

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

feat(ticksTooltip): Add a ticksTooltip option 

This feature is similar to the previous ticksValuesTooltip options but for ticks.

Closes #209
parent 68e9c69e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 8557 additions and 15 deletions
README.md
View file @ 56599713
......@@ -232,7 +232,9 @@ $scope.slider = {
**showTicksValues** - _Boolean (defaults to false)_: Set to true to display a tick and the step value for each step of the slider.
**ticksValuesTooltip** - _Function(value) (defaults to null)_: (requires angular-ui bootstrap) Used to display a tooltip when a tick value is hovered. Set to a function that returns the tooltip content for a given value.
**ticksTooltip** - _Function(value) (defaults to null)_: (requires angular-ui bootstrap) Used to display a tooltip when a tick is hovered. Set to a function that returns the tooltip content for a given value.
**ticksValuesTooltip** - _Function(value) (defaults to null)_: Same as `ticksTooltip` but for ticks values.
**scale** - _Number (defaults to 1)_: If you display the slider in an element that uses `transform: scale(0.5)`, set the `scale` value to 2 so that the slider is rendered properly and the events are handled correctly.
......
demo/demo.js
View file @ 56599713
......@@ -104,6 +104,19 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with ticks and tooltip
$scope.slider_ticks_tooltip = {
value: 5,
options: {
ceil: 10,
floor: 0,
showTicks: true,
ticksTooltip: function(v) {
return 'Tooltip for ' + v;
}
}
};
//Slider with ticks and values
$scope.slider_ticks_values = {
value: 5,
......
demo/index.html
View file @ 56599713
......@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Touch Slider</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="./lib/bootstrap.min.css">
<link rel="stylesheet" href="../dist/rzslider.css"/>
<link rel="stylesheet" href="demo.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
......@@ -97,6 +97,14 @@
></rzslider>
</article>
<article>
<h2>Slider with ticks and tooltips</h2>
<rzslider
rz-slider-model="slider_ticks_tooltip.value"
rz-slider-options="slider_ticks_tooltip.options"
></rzslider>
</article>
<article>
<h2>Slider with ticks and values (and tooltips)</h2>
<rzslider
......@@ -243,7 +251,7 @@
</body>
<script src="../node_modules/angular/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="./lib/ui-bootstrap-tpls.js"></script>
<script src="../dist/rzslider.js"></script>
<script src="demo.js"></script>
</html>
demo/lib/bootstrap.min.css 0 → 100644
View file @ 56599713
This source diff could not be displayed because it is too large. You can view the blob instead.
demo/lib/ui-bootstrap-tpls.js 0 → 100644
View file @ 56599713
This diff is collapsed.
dist/rzslider.js
View file @ 56599713
......@@ -42,6 +42,7 @@
interval: 350,
showTicks: false,
showTicksValues: false,
ticksTooltip: null,
ticksValuesTooltip: null,
vertical: false,
selectionBarColor: null,
......@@ -529,7 +530,7 @@
manageEventsBindings: function() {
if (this.options.disabled || this.options.readOnly)
this.unbindEvents();
else if (!this.options.disabled || !this.options.readOnly)
else
this.bindEvents();
},
......@@ -731,11 +732,15 @@
'background-color': this.getSelectionBarColor()
};
}
if (this.options.ticksTooltip) {
tick.tooltip = this.options.ticksTooltip(value);
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
}
if (this.options.showTicksValues) {
tick.value = this.getDisplayValue(value);
if (this.options.ticksValuesTooltip) {
tick.tooltip = this.options.ticksValuesTooltip(value);
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
tick.valueTooltip = this.options.ticksValuesTooltip(value);
tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
}
}
this.scope.ticks.push(tick);
......@@ -1633,7 +1638,7 @@
'use strict';
$templateCache.put('rzSliderTpl.html',
"<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\" ng-style=barStyle></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks track by $index\" class=tick ng-class=\"{selected: t.selected}\" ng-style=t.style><span ng-if=\"t.value != null && t.tooltip == null\" class=tick-value>{{ t.value }}</span> <span ng-if=\"t.value != null && t.tooltip != null\" class=tick-value uib-tooltip=\"{{ t.tooltip }}\" tooltip-placement={{t.tooltipPlacement}}>{{ t.value }}</span></li></ul>"
"<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\" ng-style=barStyle></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks track by $index\" class=tick ng-class=\"{selected: t.selected}\" ng-style=t.style ng-attr-uib-tooltip=\"{{ t.tooltip }}\" ng-attr-tooltip-placement={{t.tooltipPlacement}}><span ng-if=\"t.value != null\" class=tick-value ng-attr-uib-tooltip=\"{{ t.valueTooltip }}\" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span></li></ul>"
);
}]);
......
dist/rzslider.min.js
View file @ 56599713
This diff is collapsed.
src/rzSliderTpl.html
View file @ 56599713
......@@ -10,10 +10,11 @@
<span class="rz-bubble"></span> <!-- // 7 Label above right slider handle -->
<span class="rz-bubble"></span> <!-- // 8 Range label when the slider handles are close ex. 15 - 17 -->
<ul ng-show="showTicks" class="rz-ticks"> <!-- // 9 The ticks -->
<li ng-repeat="t in ticks track by $index" class="tick" ng-class="{selected: t.selected}"
ng-style="t.style">
<span ng-if="t.value != null && t.tooltip == null" class="tick-value">{{ t.value }}</span>
<span ng-if="t.value != null && t.tooltip != null" class="tick-value"
uib-tooltip="{{ t.tooltip }}" tooltip-placement="{{t.tooltipPlacement}}">{{ t.value }}</span>
<li ng-repeat="t in ticks track by $index" class="tick"
ng-class="{selected: t.selected}" ng-style="t.style"
ng-attr-uib-tooltip="{{ t.tooltip }}" ng-attr-tooltip-placement="{{t.tooltipPlacement}}">
<span ng-if="t.value != null" class="tick-value"
ng-attr-uib-tooltip="{{ t.valueTooltip }}"
ng-attr-tooltip-placement="{{t.valueTooltipPlacement}}">{{ t.value }}</span>
</li>
</ul>
src/rzslider.js
View file @ 56599713
......@@ -46,6 +46,7 @@
interval: 350,
showTicks: false,
showTicksValues: false,
ticksTooltip: null,
ticksValuesTooltip: null,
vertical: false,
selectionBarColor: null,
......@@ -735,11 +736,15 @@
'background-color': this.getSelectionBarColor()
};
}
if (this.options.ticksTooltip) {
tick.tooltip = this.options.ticksTooltip(value);
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
}
if (this.options.showTicksValues) {
tick.value = this.getDisplayValue(value);
if (this.options.ticksValuesTooltip) {
tick.tooltip = this.options.ticksValuesTooltip(value);
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
tick.valueTooltip = this.options.ticksValuesTooltip(value);
tick.valueTooltipPlacement = this.options.vertical ? 'right' : 'top';
}
}
this.scope.ticks.push(tick);
......
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