angular-slider/angularjs-slider

How to skip steps in range

WuglyakBolgoink opened this issue · 0 comments

Is it possible to do this fixed range?

[-100, -95, ..., -15, -10, 0, 10, 15, ..., 95, 100]

between -10 and 0, and between 0 and 10 no steps allowed. but after step is always 5. Between minVal and maxVAL should be always 100 points...

correct [-100,0] or [0, 100]:
image

wrong value, should be [-90, 10]:
image
or, should be [-50, 50]:
image

with onChange() I'm not happy...

Can anyone help to find a better solution?

http://jsfiddle.net/ye1kpfrj/

var myApp = angular.module('myapp', ['rzModule']);

myApp.controller('TestController', TestController);

function TestController() {
    var vm = this;

    vm.priceSlider = {
       minValue: 0,
            maxValue: 100,
            options: {
                id: 'ef148e5e-d5c4-48d9-a99a-f18aceab29e5',
                floor: -100,
                ceil: 100,
		enforceRange:false,
                enforceStep: false,
                showSelectionBar: false,
                showSelectionBarFromValue: true,
                hideLimitLabels: false,
                autoHideLimitLabels: true,
                boundPointerLabels: false,
                showTicksValues: false,
                ticksArray: [
                     0,
                    17,
                    18,
                    19,
                    36
                ],
                stepsArray: [{"value":-100,"legend":"CAT_A"},{"value":-90},{"value":-85},{"value":-80},{"value":-75},{"value":-70},{"value":-65},{"value":-60},{"value":-55},{"value":-50},{"value":-45},{"value":-40},{"value":-35},{"value":-30},{"value":-25},{"value":-20},{"value":-15},{"value":-10},{"value":0,"legend":"0%"},{"value":10},{"value":15},{"value":20},{"value":25},{"value":30},{"value":35},{"value":40},{"value":45},{"value":50},{"value":55},{"value":60},{"value":65},{"value":70},{"value":75},{"value":80},{"value":85},{"value":90},{"value":100,"legend":"CAT_B"}],
                draggableRangeOnly: true,                
                translate: function(value) {
                    return '<div class="tick-active">' + Math.abs(value) + '%</div>';
                }
            }
    }
}

Update:

fixed, just remove {"value":-90} and {"value":90} from list 🤦🏻‍♂️:

image