Custom AngularJS Bootstrap Slider

Question

Trying to use this slider with angularJS
https://github.com/seiyria/angular-bootstrap-slider

I do have it working, though wanted to be able do a few custom items and in looking at the source doc file, and after too much time, I feel to need some direction.

What I'm trying to do with the slider is ...

• have it be viewable in the range from 1-100 in tooltip ( This part is good )
• have a left most backstop at 50% ( halfway) and a right most endstop at 100% (full)

• 3 horizontal marks where the slider marks can land : 50%, 80%, 100%

  Is this possible, any suggestions would be greatly appreciated?

  Doc: https://github.com/seiyria/angular-bootstrap-slider/blob/dbb10c69a929dfca659cf46dce5362d562232332/test.js

Answer 1

Sorry for the late reply, only accidentally found this question. I have implemented a very similar range slider using seiyria. I have added the snap bounds for my range slider and totally customized it. Perhaps the following can help. I leave you my options which i added inside my controller, as well as my html for the slider.

CONTROLLER

$scope.testOptions = {
      min: -2.5,
      max: 2.5,
      step: 0.5,
      orientation: 'horizontal',  // vertical
      handle: 'round', //'square', 'triangle' or 'custom'
      tooltip: 'always', //'hide','always'
      tooltipseparator: ':',
      tooltipsplit: false,
      enabled: true,
      naturalarrowkeys: false,
      range: false,
      ngDisabled: false,
      reversed: false,
      ticks: [-2.5,-2,-1.5,-1,-0.5,0,0.5,1,1.5,2,2.5],
      ticks_labels: ['-2.5','-2','-1.5','-1','-0.5','0','0.5','1','1.5','2','2.5'],
      ticks_snap_bounds: 30
    };
    $scope.range = true;
    $scope.slidervalue = "0";

HTML

<div class="col-sm-12">
            <div class="as-slider-container">
              <h4>Adjustment Score</h4>
              <span>Please select an appropriate Score by using the slider below.</span>

              <slider ng-model="sliders.sliderValue" min="testOptions.min" step="testOptions.step" max="testOptions.max" value="testOptions.value" data-slider-handle="custom" ticks="testOptions.ticks" ticks-labels="testOptions.ticks_labels"></slider>
              <div class="slider-label-container">
              <label class="slider-selected-label label-primary label" data-ng-bind="sliders.sliderValue">Scoring</label>
              </div>
            </div>
        </div>

Summary: You can use the "ticks_snap_bounds" option to set the size (in pixels) where snapping to the next tick/step will occur. So if you want to have 3 snaps (at 50%, 80%, 100%) just add those values as your ticks. Then you can add all the labels so that you dont only end up with the 3 snap ticks.

Remember that you can add a custom class above the slider and override its styles to extend/hide or change the look and feel completely. As a tip, that is another way of adding endpoints if you need them and cannot add them via the stock options.

Will try to follow up with a fiddle if needed. There is no need to modify the directive itself as the snapping and endpoints are all settable in the sliders options.