2

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 ...

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.