darul75 / angular-awesome-slider

:arrows_clockwise: Angular slider control directive
http://darul75.github.io/angular-awesome-slider/
MIT License
143 stars 63 forks source link

showing ticks #124

Open pliablepixels opened 8 years ago

pliablepixels commented 8 years ago

Hello, I am trying to show 'ticks' at specific instances of the bar. For example, in a range of 1-10, I'd like to show ticks at 1,6,7,8. I tried using modelLabels but that only shows when I slide on that value.

Is this possible? I tried using the scale option, but it looks like scale is for displaying is across the full bar, not at precise locations.

thanks

darul75 commented 8 years ago

"Yes you can" by setting the following scale options attribute array :

scale: [{val:1, label:'1'}, {val:6, label:'this is 6'}, ...],

pliablepixels commented 8 years ago

YOU ROCK!!!! It works!! Last question -- can I change the color of the scale labels? I noticed that the scale label is not exactly aligned with the "|" above it though.

FYI here is what I am using it for -- to show alarm frames in a security camera

screen shot 2015-07-26 at 1 09 02 pm
darul75 commented 8 years ago

for each value a different color or globally ?

pliablepixels commented 8 years ago

globally. What I want to do is show the ticks and the labels at the bottom in red (as they are alarm frames). I tried adding scale:{"background-color":"red"}, to options but that was not it

darul75 commented 8 years ago

best will be to put your own 'className' attribute name in your slider options object, by instance 'myCameraSlider', then in your css match following css path

.myCameraSlider div.jslider-scale ins {

}

I put an update for scale label not exactly aligned, hope it will match

darul75 commented 8 years ago

new release 2.4.0

pliablepixels commented 8 years ago

@darul75 thank you so much. The color works perfectly. The alignment however is not fixed in 2.4.0 (I've updated)

Here is what it looks like - I used the "|" character for label so its the same character as the scale

screen shot 2015-07-26 at 2 15 10 pm