How to set a ceil value only for minValue

Question

I'm using a rangeSlider with this specific html configuration :

The rangeSlider preview

<rzslider data-rz-slider-model="rangeSlider.minValue"
          data-rz-slider-high="rangeSlider.maxValue"
          data-rz-slider-options="rangeSlider.options">
</rzslider>

and this angularjs configuration :

$scope.rangeSlider = 
{
    minValue: startTime,
    maxValue: endTime,
    options: 
    {
        floor: 0,
        ceil: 36,
        step: 1,
        noSwitching: true,
        minRange: 1,
        maxRange: 24,
        showSelectionBar: true,
    }
};

Everything works great but I want to prevent ONLY for the rangeSlider.minValue to exceed the value 23 and I can't succeed in doing that.

Do you have any idea to dealing with that or is it simply possible?

Thanks in advance for your help

Answer 1

You can add a handler for the built in onEnd event for rzSlider. Add this to your options:

options: {
    // your existing options settings go here
    onEnd: function() {
        if ($scope.rangeSlider.minValue > 23) {
            $scope.rangeSlider.minValue = 23;
        }
    }
}