Range slider with ticks

1

Hi, it looks like Safari does not support adding ‘ticks’ to the input=range slider via data-list while Chrome does.

I need to display ticks at specific places in my slider.

Can someone please help me in how one can add ticks (lines) at specific places in the range?

For example: lets say range = 1,10
and I have an array with [2,3,7,8] then it should draw ticks at these positions on the range.

thanks

2

you can add ng-change-function to your range slide and call a function on the scope, that checks the current value --> and set a scope-variable to show the tick.

<input type="range" ng-model="myRange" ng-change="checkTick()">
<span ng-show="showTick">{{myRange}}</span>

var ticks = [2, 4, 6, 8, 10];
$scope.checkTick = function () {
 if (ticks.indexOf($scope.myRange) > -1) {
   $scope.showTick = true;
 } else {
   $scope.showTick = false;
 }
};

But the range-input has a property called step to set ticks
http://www.w3schools.com/tags/att_input_step.asp

3

hi @bengtler, my apologies if my post was not clear.

Here is a codepen:
http://codepen.io/pliablepixels/pen/EjdpVB?editors=101

What I want is to show tick marks like this at specific points of the range:
image

The problem is that Safari does not seem to honor the “step” directive and neither does it honor the “data list” element, so even if I specify ticks, it does not show.

If you however run the codepen in Chrome you will see the ticks.

So I am looking for a way to display ticks as an overlay. Note that the actual size of the slider can change -but the range value will be the same.

I did find another slider that worked (3rd) party, but it was not as reactive as the inbuilt range slider (https://github.com/darul75/angular-awesome-slider), kept conflicting with the sliding of the page itself (menu) and other problems, so I thought its best I use the inbuilt range slider.

4

you could build an own directive added to the range slider.
There you get the range-element itself --> can get the width of that element.
So you can calculate the position if your ticks and show it.

But i am using this:
http://darul75.github.io/angular-awesome-slider/

and it seems it has the possibility of ticks

5

@bengtler, I tried using the same slider (darul75) yesterday. I found the following issues with it:

a) When you slide that slider the page also slides (it conflicts with a side menu slide)
b) The biggest problem was as you slide, it does not update the associated ng-model, it only updates it after you finish sliding (even if you use realtime).

6

okay does not get in those problems ^^.

But how i said --> build an own little directive for range-inputs.
in your directive you can use the truncate-option to wrap you input in an own dom-structure to add your ticks

7

@bengtler, my knowledge here is very minimal. Would you have time to get me started? Would it be possible for you to post a codepen for a directive that say, just draws a series of dots just above the range bar which matches the size of the range bar? I can take over from there to do the scaling of max/min to size.

8

i have other work to do, yet.
maybe i will build a little directive later.