angular-slider / angularjs-slider

Slider directive for AngularJS 1.X. No dependencies and mobile friendly.
http://angular-slider.github.io/angularjs-slider
MIT License
1.23k stars 498 forks source link

Using invalid values for ticks and ranges #680

Closed WuglyakBolgoink closed 2 years ago

WuglyakBolgoink commented 2 years ago

Hallo!

we defined range between -100 and 100 with steps 5.. but now we found one bug with very old users, where steps was 1.

now it's not possible to use the sliders for old users, because plugin change the values to

  "minValue": -100,
  "maxValue": -100,

and ignored for example initial 67% and 33%

my config

// where
// leftVal === 67
// rightVal === 33

$ctrl.sliderConfig = {
            minValue: -1 * leftVal,
            maxValue: rightVal,
            options: {
                floor: -100,
                ceil: 100,

                enforceRange: false,
                enforceStep: false,
                showSelectionBar: false,
                showSelectionBarFromValue: true,
                hideLimitLabels: false,
                autoHideLimitLabels: true,
                boundPointerLabels: false,
                showTicksValues: false,
                disableAnimation: true,
                draggableRangeOnly: true,
                ticksArray: [
                    0,
                    17,
                    18,
                    19,
                    36
                ],
                stepsArray: [
                    {
                        value: -100,
                        legend: 'LEFT'
                    },
                    {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: 'RIGHT'
                    }
                ],
                translate: (value) => {
                    return `<div class="tick-active">${ Math.abs(value) }%</div>`;
                }
            }
        };

any idea how I can allow to use non step'pable values by initial case?

ValentinH commented 2 years ago

What about rounding the old invalid values to their closest valid value?

WuglyakBolgoink commented 2 years ago

@ValentinH this is what I need to do :(