Ticks on slider are not stretch properly

[girniakolenka]

Steps to reproduce

1. I have created simple slider with range by using stepsArray property
2. $scope.minRangeSlider = { minValue: 10, maxValue: 100, options: { floor: 0, ceil: 100, showTicksValues: true, stepsArray: [10, 17, 71, 86, 100] } };

Demo: https://jsfiddle.net/8yt262cg/ (fork this example and update the link)
I have edited your examples (example with "Range slider")

Expected behaviour

Ticks on slider should stretch depends on values which they have

Actual behaviour

Ticks on slider are not stretch properly

[ValentinH]

Unfortunately, this is not possible with the current version. This limitation is due to the way the ticks are rendered: flexbox is used and so the ticks are automatically spread on the slider.

At the moment, I don't have any solution to provide...

[girniakolenka]

Is there any possibility that it will be fixed in next versions?

[ValentinH]

I can't take any engagement on it. If somebody provide a pull request that provide a good solution, I would be happy to accept it.

At the moment, I am less active on this repository support so I would probably not do it myself.

[girniakolenka]

Ok, thank you for your response

[ValentinH]

@girniakolenka I have work on a ticks refactoring that enables to position ticks at specific position: #426. Do you think it would match your needs?

[ValentinH]

#426 has been merged so ticksArray is available from 5.6.0. Now you can have a slider that look likes what you wanted, but it will still have intermediate positions... With the current implementation of the slider, this is not possible.

[ValentinH]

If you only want these values: [10, 17, 71, 86, 100] and if they need to be positioned like in the example you gave, you can implement your own custom scale by using the customValueToPosition and customPositionToValue options.

[girniakolenka]

Thank you very much!