Develop Reference

ion.rangeSlider: Using one handle position to update the other handle's position

I'm using the JavaScript ion.rangeSlider library (https://github.com/IonDen/ion.rangeSlider).
It supports using two handles.
I want to be able to update the "to" handle when I change the "from" handle.
$(function() {
console.log('jQuery here!');
let zfrom = -5;
const $zslider = $("#zslider");
$zslider.ionRangeSlider({
skin: 'big',
type: 'double',
min: -5.000,
max: 5.000,
from: -5.000,
to: 5.000,
step: 0.1,
//on slider handles change
onChange: function (data) {
zslider.update({
to: -data.from,
})
},
onUpdate: function(data) {
},
onFinish: function (data) {
}
})
const zslider = $zslider.data("ionRangeSlider");
})
HTML:
<input id=zslider type=text />
The problem is that when I move the "from" handle it moves the "to" handle a little bit and then the "from" handle loses focus and I have to grab it again.
I suspect that the zslider.update is causing the onChange/onUpdate to fire and so goes into an infinite loop.
I've tried using various flags and delays, but I can't get the logic to work.
I have a work around which is to move the "to" slider after I finish moving the "from" slider (onFinish), but it isn't pretty.

NoUISlider - sticking values to their respective handlers?

I'm working on an e-commerce project that has a price range slider with two handles (min & max price filters). I decided to use NoUiSlider as it comes recommended. Although the plugin has no dependencies, I am also using jQuery 3.2.1, if it all relevant.
How can I make the values "stick" to their respective handlers? The effect I'm looking for is exactly like the slider on this webpage. I scanned through the docs but haven't been able to find anything, the closest thing I could find which I think might be related is this events page.
var handlesSlider = document.getElementById('slider-handles');
var minPrice = document.getElementById('min-price');
var maxPrice = document.getElementById('max-price');
var inputs = [minPrice, maxPrice];
noUiSlider.create(handlesSlider, {
start: [ 0, 100 ],
connect: [false, true, false],
step: 5,
range: {
'min': [ 0 ],
'max': [ 100 ]
},
format: wNumb({
decimals: 0,
thousand: '.',
prefix: '£',
}),
});
handlesSlider.noUiSlider.on('update', function( values, handle ) {
inputs[handle].innerHTML = values[handle];
});
My min-price and max-price are span elements, although I can change them if required.

I had a similar problem.
In my case, I wanted to use input boxes (instead of tooltips) to display slider values. This looks similar to your initial implementation using inputs. :)
So I solved it like this:
Create two or more input boxes in HTML (supplemented with proper ids for javascript)
<div id="exampleSlider"></div>
<div>
<input id="firstInput">
<input id="secondInput">
</div>
On Javascript:
Create a slider (I attached an example here):
var slider = document.getElementById('exampleSlider');
noUiSlider.create(slider, {
// This is an example. Customize this slider to your liking.
start: [300, 500],
range: {
'min': [0],
'max': [1000]
},
format: wNumb({
thousand: ',',
decimals: 0,
to: function (value) {
return value + ',-';
},
from: function (value) {
return Number(value.replace(',-', ''));
}
}),
});
Code for handling inputs from the slider
var firstInput = document.getElementById('firstInput');
var secondInput = document.getElementById('secondInput');
// add additional variables if you have more than two handles...
slider.noUiSlider.on('update', function (values) {
var handleValue = slider.noUiSlider.get();
firstInput.value = handleValue[0]
secondInput.value = handleValue[1]
// add additional inputs if you have more than two handles...
});
You can refer to my example code on JSfiddle

Javascript UIslider result.JS

I have a problem with my js code:
var stepSlider = document.getElementById('slider-step');
noUiSlider.create(stepSlider, {
start: [ 0 ],
step: 10,
range: {
'min': [ 0 ],
'max': [ 100 ]
}
});
var stepSliderValueElement = document.getElementById('slider-step-value');
stepSlider.noUiSlider.on('update', function( values, handle ) {
stepSliderValueElement.innerHTML = values[handle];
q1=stepSlider.noUiSlider.get()
});
console.log(q1)
console.log(stepSliderValueElement.innerHTML)
It just shows the Start point 0.00, but when I move the value to the 50% it wont change to show me 50.
EDIT :
i found what is my problem. it's because the slider will update but q1+20 outside of that wont change. but i really need 2 sliders and plot them in a circle percentage way. i can't put those in update way in my code. any idea?
Can anyone put me in the right direction?

Seems to be changing as it should. I put a log on your update method and it's changing the value as it should.
stepSlider.noUiSlider.on('update', function( values, handle ) {
stepSliderValueElement.innerHTML = values[handle];
q1=stepSlider.noUiSlider.get()
console.log(q1);
});
https://jsfiddle.net/ayang10/0rohoeLg/312/

How to gve track points for Bootstrap slider?

I have a scenario like I have a Bootstrap slider, in that I want track points on the track of the slider and the tool tip must be fixed (i.e. it must be exist even after click).
Here is my Plunker link:
http://embed.plnkr.co/D3GJQn/preview
I need to get points on the track as shown in below image:

Add property tooltip:"always" to show the tooltip always
$(document).ready(function () {
var mySlider = $("#slider-input").slider({
min:0,
max: 4200,
value:1000,
step:1000,
tooltip:"always"
});
});
You can see the complete set of options here - https://github.com/seiyria/bootstrap-slider#options
To get the current value of slide, see below.
$("#slider-input").on('slide', function (ev) {
console.log($("#slider-input").val());
});
You can use ticks: [0, 500, 1000, 1500], property to show intermedaite points. for more http://seiyria.com/bootstrap-slider/
example - https://plnkr.co/edit/W8c2UuPMiEeMwQ8g7kCV?p=preview

This is how I got the current value:
$(document).ready(function () {
var mySlider = $("#slider-input").slider({
min:0,
max: 4200,
value:1000,
step:1000,
formatter: function(value) {
return 'Current value: ' + value;
}
});
});
You can also show the value by doing:
$("#mySlider").on("slide", function(slideEvt) {
$("#sliderValue").text(slideEvt.value);
});
with HTML:
<span>Current Value: <span id="sliderValue">1</span></span>
Here is a link to show some examples I found after doing this:
http://seiyria.com/bootstrap-slider/
Hope this helps!

Take a look at Example 13. Here is the example code, take note of the ticks property:
var slider = new Slider("#ex13", {
ticks: [0, 100, 200, 300, 400],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});

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:
Instead, I would like the color to go from the center of the slider to the slider control.
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(";");
});
});
});

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.