angular-awesome-slider icon indicating copy to clipboard operation
angular-awesome-slider copied to clipboard

showing ticks

Open pliablepixels opened this issue 10 years ago • 7 comments

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

pliablepixels avatar Jul 25 '15 19:07 pliablepixels

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

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

darul75 avatar Jul 26 '15 16:07 darul75

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

pliablepixels avatar Jul 26 '15 17:07 pliablepixels

for each value a different color or globally ?

darul75 avatar Jul 26 '15 17:07 darul75

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

pliablepixels avatar Jul 26 '15 17:07 pliablepixels

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 avatar Jul 26 '15 17:07 darul75

new release 2.4.0

darul75 avatar Jul 26 '15 17:07 darul75

@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

pliablepixels avatar Jul 26 '15 18:07 pliablepixels