CODEWITHSUNDEEP
javascriptjqueryhtmlcssslider
designjunkie
designjunkie

Reputation: 43

Ion.RangeSlider color from middle

I'm trying to use Ion.RangeSlider to make a slider where the color starts from the center and goes in the direction of the slider control until it hits the slider control. Right now, this is what I have:

Current Slider (color goes from left end to slider control)

Instead, I would like the color to go from the center of the slider to the slider control.

How I want it to be

How can I make the RangeSlider work like that so that the color starts from the middle (as shown above)?

EDIT:

I looked at this question, but it deals with sliders with two controls instead one.

EDIT 1:

setup.js:

jQuery(document).ready(function($){

     $(".slider").each(function() {

        console.log($(this).attr("id"));
        $(this).ionRangeSlider({
            type: $(this).attr("data-slider_type"),
            grid: $(this).attr("data-slider_grid"),
            min:  $(this).attr("data-slider_min"),
            max:  $(this).attr("data-slider_max"),
            prefix: $(this).attr("data-slider_prefix")+" ",
            postfix: " " + $(this).attr("data-slider_suffix"),
            step: $(this).attr("data-slider_stepper"),
            from:  $(this).attr("data-slider_from")
        });

        $(this).on("change", function () {
            var $this = $(this),
                value = $this.prop("value").split(";");
        });
    });

});

Upvotes: 4

Views: 1448

Answers (1)

Jordan Soltman
Jordan Soltman

Reputation: 3883

Use: https://github.com/jordansoltman/ion.rangeSlider with has the additional boolean option: fixMiddle. For example:

$(".slider").ionRangeSlider({
    fixMiddle: true,
    ...
});

Note: use ion.rangeSlider.js as ion.rangeSlider.min.js has not been updated.

Upvotes: 1

Related Questions