angular-slider of words showTicks=true is showing more ticks than expected

unread,

Apr 5, 2016, 8:10:51 AM4/5/16

to AngularJS

Hi,

I have used rzslider of words in my project, the movement i set showTicks=true it shows more ticks than expected.

Here is the sample code

// JS//

$scope.slider = {
  value: 0,
  maxValue: 3,
  options: {
    floor: 0,
    ceil: 3,

    showTicks=true,
    stepsArray: [ "Fair","Good", "Very Good","Excellent"]
  }

};

//html//

<rzslider rz-slider-model="slider.value"
          rz-slider-high="slider.maxValue"
          rz-slider-options="slider.options"></rzslider>

rzslider version: angularjs-slider - v2.10.4

Angular version: 1.5.4

attached the screen shot it shows 6 ticks I dont want the start tick and the end tick.

I only want 4 ticks with lable's "Fair","Good", "Very Good","Excellent"

If i remove showTicks=true the slider looks good but it doesn't show the all the range label by default, it only show "Fair" and "Excellent"

Appreciate your help.

rzslider.png

unread,

Apr 5, 2016, 11:15:30 AM4/5/16

to AngularJS

one correction

$scope.slider = {
  value: 0,
  maxValue: 3,
  options: {
    floor: 0,
    ceil: 3,

    showTicks:true,

    stepsArray: [ "Fair","Good", "Very Good","Excellent"]
  }

};

Angular version: 1.4.8

unread,

Apr 5, 2016, 12:09:38 PM4/5/16

to AngularJS

found the root cause it was stupid css of my project which was causing the issue.