Here I've used jquery-ui.js so that it shows numbers from 0 to 2000000 and I'd like to show long number formatted like 2,000,000
<div class="slider>
<a id="minamount" style="">0</a>
<a id="maxamount" style="">2000000</a>
</div>
javascript:
$(".slider").slider({
min: 0,
max: 2000000,
values: [0, 2000000],
range: true,
step: 10,
slide: function (event, ui) {
$("#minamount").html(ui.values[0]);
$("#maxamount").html(ui.values[1]);
}
});
You can use Intl.NumberFormat() for doing it like -
const numberFormat = new Intl.NumberFormat();
$(".slider").slider({
min: 0,
max: 2000000,
values: [0, 2000000],
range: true,
step: 10,
slide: function (event, ui) {
$("#minamount").html(numberFormat.format(ui.values[0]));
$("#maxamount").html(numberFormat.format(ui.values[1]));
}
});
You can pass a bunch of values for your locale according to the documentation if you want it formatted according to a specific locale.
Note: On the initial load, the slide function is not called, in which case, you could manually call the slider('values') function of the slider after initialization to manually set the HTML in the beginning.
EDIT:
Find a sample Fiddle to play around
To format a string using thousands separator (eg 12,345) you can use toLocaleString().
$("#minamount").html(ui.values[0].toLocaleString());
See snippet below.
for (var i = 1.234; i < 10000000; i *= 10)
{
console.log(i.toLocaleString());
}
Related
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
Code so that you can see what im working with.
$("#slider-markup").slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 500,
value: 0,
step: 0.01,
slide: function (event, ui) {
$("#markupRate").text(ui.value);
calcNow();
}
});
Okay so I know how to step increment as you can see here its a very fine step I'm using but its difficult to get to the right value due to the high range.
I also know that the slider can be used with the mouse and once activated can be moved to the next step with the keyboards arrows.
What I would like to be able to do is set a mouse step of 1. then a keyboard step of 0.01
Is this possible, has it been done? I've been looking around for this sort of functionality of sliders but am coming up empty.
The quick answer:
$(function() {
$("#slider-markup").slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 500,
value: 0,
step: 0.01,
slide: function(event, ui) {
$("#markupRate").text(ui.value);
}
});
$("#slider-markup .ui-slider-handle").mousedown(function() {
$("#slider-markup").slider("option", "step", 1.0);
}).mouseup(function() {
$("#slider-markup").slider("option", "step", 0.1);
});
});
Working Example: https://jsfiddle.net/Twisty/xkwq87j6/
You can adjust the step option by biding a callback to specific events.
I am currently comparing our price slider http://www.showstyle.lu/homme/ to that on http://theme-lookz-responsive.webshopapp.com/en/designer/ and as you can see under filters if you drag the filter on our homepage (ShowStyle) the number value of the min & max do not update dynamically i.e. you have to guess where to let go of the slider and hope it lands on a price.
On the example website: if you drag the price filter the min & max values update dynamically making it easier to see what your settings are.
I tried comparing the code of both filter price boxes and saw this additional script they implemented but couldn't figure out if that is what caused it, I think it is but any idea how to re-enact that onto my template? Both are using the same CMS so utilising this code is permitted, it's just a comfort update. I managed to adjust the code but don't understand if I should replace the "ui" syntax with price-filter-range or min/max syntax.
Original Script
<script type="text/javascript">
$(function(){
$('#filter_form input, #filter_form select').change(function(){
$(this).closest('form').submit();
});
$("#collection-filter-price").slider({
range: true,
min: 0,
max: 20,
values: [0, 20],
step: 1,
slide: function( event, ui){
$('.sidebar-filter-range .min span').html(ui.values[0]);
$('.sidebar-filter-range .max span').html(ui.values[1]);
$('#filter_form_min').val(ui.values[0]);
$('#filter_form_max').val(ui.values[1]);
},
stop: function(event, ui){
$('#filter_form').submit();
}
});
});
The 0/20 values are depending on the page you were on so I suppose that also needs to be dynamic based on the highest price item on the current catalog page
Any help is greatly appreciated, thanks a lot!
Try this:
$("#collection-filter-price").slider({
range: true,
min: 0,
max: 750,
values: [$('#filter_form_min').val(), $('#filter_form_max').val()],
step: 1,
slide: function( event, ui){
$('.price-filter-range .min span').text(ui.values[0]);
$('.price-filter-range .max span').text(ui.values[1]);
},
stop: function(event, ui){
$('#filter_form_min').val(ui.values[0]);
$('#filter_form_max').val(ui.values[1]);
$('#filter_form').submit();
}
});
Please note this code (in my answer) been updated from the original due to a misunderstanding. I have also re-edited it to fix functionality that was broken by the inclusion of this code.
Edit: I just noticed that your site already includes the JS code
$(function(){
$('#filter_form input, #filter_form select').change(function(){
$(this).closest('form').submit();
});
$("#collection-filter-price").slider({
range: true,
min: 0,
max: 750,
values: [0, 520],
step: 1,
slide: function( event, ui){
$('.sidebar-filter-range .min span').html(ui.values[0]);
$('.sidebar-filter-range .max span').html(ui.values[1]);
$('#filter_form_min').val(ui.values[0]);
$('#filter_form_max').val(ui.values[1]);
},
stop: function(event, ui){
$('#filter_form').submit();
}
});
});
However this code is being dynamically generated by the server (notice how 520 is embedded into the script)... The only reason it's not working is because it's expecting the class name to be sidebar-filter-range instead of price-filter-range. If you could just make the correct modification so that it's pointing to the correct elements then it should work.
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.
http://jsfiddle.net/ntSrb/4/
Problem: The second slider should decrement in steps of 1 as the first slider changes by steps of 3
I have inspected the changes of the second slider and its as if the first time the first slider changes it works, after that the second slider just doesnt register new values
Also the second slider jumps randomly if you pull the first slider by large steps.
This is a simplified version of my problem because in reality I have 4 sliders which will affect eachother in a similar way (as one slider increments by 3, then the three other sliders decrements by 1)
HTML
<span id="firstspan">25</span>
<div id="firstrange" style="max-width: 300px;"></div>
<span id="secondspan">25</span>
<div id="secondrange" style="max-width: 300px;"></div>
JS
function updateSpans(numberChange) {
var oldval;
var newval;
oldval = $("#secondrange").slider("value"); //number
newval = Math.round(oldval + numberChange / 3);
$('#secondrange').slider("option", "step", 1);
$("#secondrange").slider("option", "value", newval);
$('#secondrange').slider("option", "step", 3);
$("#secondspan").text(newval);
}
$(function () {
$("#firstrange").slider({
orientation: "horizontal",
min: 0,
max: 100,
value: 25,
step: 3,
slide: function (event, ui) {
var currentvalue = ui.value; //number
var oldvalue = parseInt($('#firstspan').text()); //number
$("#firstspan").text(currentvalue);
updateSpans(oldvalue - currentvalue);
},
});
});
$(function () {
$("#secondrange").slider({
orientation: "horizontal",
min: 0,
max: 100,
value: 25,
step: 3,
});
});
Please see this jsFiddle Link. I have change your jsfiddle code and now it works. Please check. Change in line 22:
change: function(event, ui){