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
Related
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/
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
});
I'm using 3 noUISliders. I want to combine the outputs of the 3 sliders to create an html output. Specifically, I want to use the combination to select an image file (ie. img135.jpg) where 1 is the output from the first slider, 3 is from the second and 5 is from the third. I have 27 images - I want to be able to select one based on the combined output of the 3 sliders ( 111.jpg, 211.jpg, 311.jpg, etc. through 555.jpg).
I have three sliders providing output:
var slider1 = document.getElementById('slider1');
noUiSlider.create(slider1, {
start: 1,
connect: 'lower',
orientation: 'horizontal',
range: {
'min': 1,
'max': 5
},
snap: true,
format: wNumb({
decimals: 0
})
});
var sliderOutput1 = document.getElementById('value-slider1');
slider1.noUiSlider.on('update', function(values, handle) {
sliderOutput1.innerHTML = values[handle];
});
var sliderOutput2 = document.getElementById('value-slider2');
slider2.noUiSlider.on('update', function(values, handle) {
sliderOutput2.innerHTML = values[handle];
});
var sliderOutput3 = document.getElementById('value-slider3');
slider3.noUiSlider.on('update', function(values, handle) {
sliderOutput3.innerHTML = values[handle];
});
var image_path = 'img' + sliderOutput1.val() + sliderOutput2.val() + sliderOutput3.val() + '.jpg';
("#img").html(image_path);
<div id="slider1"></div>
<div id="slider2"></div>
<div id="slider3"></div>
<span id="value-slider1"> </span>
<span id="value-slider2"> </span>
<span id="value-slider3"> </span>
<div id="img"></div>
The sliders are all in and outputting values. I need advice on how to take the next step.
I'm pretty new at jscript, so any help or advice that you could provide would be great appreciated.
Ken
You can make it a lot fancier, but a simple pattern like the following should be fine:
function updatePicture() {
var image_path = 'img' + sliderOutput1.val() + sliderOutput2.val() + sliderOutput3.val() + '.jpg';
// I assume the missing $ was a typo
$("#img").html(image_path);
}
slider1.noUiSlider.on('update', function(values, handle) {
sliderOutput1.innerHTML = values[handle];
updatePicture();
});
var sliderOutput2 = document.getElementById('value-slider2');
slider2.noUiSlider.on('update', function(values, handle) {
sliderOutput2.innerHTML = values[handle];
updatePicture();
});
var sliderOutput3 = document.getElementById('value-slider3');
slider3.noUiSlider.on('update', function(values, handle) {
sliderOutput3.innerHTML = values[handle];
updatePicture();
});
Basically you get an event when any of the sliders change, you then proceed to update its output text (which you've done yourself), and the last step is to trigger the image refresh function which combines the three outputs into a usable path.
Interesting slider library by the way, I've never seen it before!
I create a slider, change the orientation:'vertical' and link the "span" with it so that I can update and set the values as I drag/tap the slider. It works well, but as soon as I put the Handle at the bottom with the direction: 'rtl', span outputs undefined.
I saw the same problem on the NoUiSlider site although the slider is horizontal, but the problem is still there.
Per default, the direction of the handles of the slider is set to "ltr" or "left-to-right". When the orientation of the slider is set to vertical the Handle acts the same way, they adjust either "ltr = top-to-bottom" or "rtl = bottom-to-top".
var slider = document.getElementById('sl1');
noUiSlider.create(slider, {
start: 1,
step: 1,
connect: 'lower',
direction: 'rtl',
orientation: 'vertical',
range: {
'min': 1,
'max': 32
},
format: wNumb({
decimals: 0,
})
});
var input = document.getElementById('input-with-keypress1');
slider.noUiSlider.on('update', function(values, handle) {
input.value = values[handle]; //When the slider value changes, update the input
});
slider.noUiSlider.on('set', function(values, handle) {
input.value = values[handle];
JsFiddleDemo
I don't know why, but it seems the External Resource links won't render the slider, Excuse me but I'm a noob and maybe I just got the syntax wrong (works local though)..
I am trying to build a ui slider similar to the one on this site: http://www.solarcity.com/
I want to be able to show the monthly value and then a yearly value next to it. ( I would assume multiplying the value of the monthly by 12 of course)
Once upon a time I had my slider working properly until I tried to multiply the monthly value by 12.
What did I do wrong?
(Sorry I am totally new to JavaScript)
Here is my Jsfiddle: http://jsfiddle.net/7qDyq/1/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<span class="slider-output" id="monthly_bill">0</span>/month or <span class="slider-output" id="yearly_bill">0</span>/year
<div id="bill_slider">
</div>
$(document).ready(function(){
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (monthly_bill * 12 )
$("#monthly_bill").text(tasks_time);
$("#monthly_bill").text(tasks_done);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function() {
update();
}
});
});
Eventually after I figure this out I am also wondering how to change the color of the slider and words after the slider hits a certain point. (If then statement?) Not sure how to implement...
Any help on this is greatly appreciated. Thanks!
Most of the issues in your original jsFiddle traced back to bad JS var names; here is how you would achieve the desired effect:
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (bill_slider * 12)
$("#monthly_bill").text(bill_slider);
$("#yearly_bill").text(yearly_bill);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function () {
update();
}
});
Working jsFiddle, forked from yours: http://jsfiddle.net/6Bprf/5/
If you update your question with a description & example of the color-coding you want to do, we can include that in our answers.