I am currently working on implementing Ion.RangeSlider to create a slider that changes color starting from the center and moving towards the slider control until it reaches it. The current setup I have is as follows:
However, I would prefer the color to transition from the middle of the slider to the slider control.
Is there a way to configure the RangeSlider to achieve this effect where the color originates from the center (as depicted above)?
EDIT:
I came across this question, but it pertains to sliders with two controls rather than 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(";");
});
});
});