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.
Related
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());
}
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 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.
I have the following markup
<div id="slider"></div>
<p id="ID"></p>
<p id="COUNTRY"></p>
<p id="DESC"></p>
and my Jquery script
var Country = ['100~USA~UsaDescr', '101~SPAIN~SpainDescr', '102~ITALY~ItalyDescr'], p=$('#ID');
$('#slider').slider({
max: 10,
min: 0,
slide: function(event, ui){
p.text(Country[ui.value]);
}
});
I would like upon moving the slider...
For the first slider position update the ID control with 100, the COUNTRY control with USA and the DESC with UsaDescr
For the second slider position update the ID control with 101, the COUNTRY control with SPAIN and the DESC with SpainDescr
I know i am doing horrible things here, but hey! This is my Jquery start!
For anyone willing to help here is the JSFiddle
I wouldn't track properties of objects such as an ID, Country_Name and Description in a concatenated string like that, but this should get you started.
http://jsfiddle.net/wUhm7/1/
html
<div id="slider"></div>
<p id="ID"></p>
<p id="COUNTRY"></p>
<p id="DESC"></p>
javascript
var Country = ['100~USA~UsaDescr', '101~SPAIN~SpainDescr', '102~ITALY~ItalyDescr'];
var splitValues = Country[0].split("~");
$('#ID').html(splitValues[0]);
$('#COUNTRY').html(splitValues[1]);
$('#DESC').html(splitValues[2]);
$('#slider').slider({
max: 2,
min: 0,
slide: function(event, ui){
var splitValues = Country[ui.value].split("~");
$('#ID').html(splitValues[0]);
$('#COUNTRY').html(splitValues[1]);
$('#DESC').html(splitValues[2]);
}
});
Also, You will need to either do some checking to see if an array position exists or limit your slider max value to 2 in your example. Or else when you move the slider to 3, the Country[3] doesn't exist.
Background: I currently have a working jQuery slider on my website inside my .js file
$( "#slider-range-min" ).slider({
range: "min",
value: 100,
min: 1,
max: 100,
});
I need to be able to override the "Value" from 100 to some other value sometimes. So I tried this:
$( "#slider-range-min" ).slider({
range: "min",
value: _Slider_Value,
min: 1,
max: 100,
});
and defined this on my html page
<script type="text/javascript">
var _Slider_Value = 50;
</script>
which also works! Except then on all the other pages I get a javascript error stating "_Slider_Value is not defined". I'd rather not have to copy & paste the value onto all my pages if I can avoid it... doesnt seem like a "good" way to do it?
Question: is there a better way to do this - so I can have a default value for my slider, but occasionally override it when required?
Edit: Another way of saying it: how do I make my slider default to "100" unless I tell it otherwise in my html page?
define that in a js file which you are including in every page
place a span in your html where you have slider in a div container here is (id="slider-range-min")
<span class="min">100</span>
read this value in your slider function
$( "#slider-range-min" ).slider({
range: "min",
value: $(this).find('.min').text();,
min: 1,
max: 100,
});
wherever u need the value to be update on the page change the span value dynamically if need else it will take the default value eg. 100 here.
if you are trying to minimize variables you can always check
if (_Slider_Value != undefined) {
//your code here
}
or
(_Slider_Value != undefined) ? _Slider_Value : 100;
so your final code can be
$( "#slider-range-min" ).slider({
range: "min",
value: (_Slider_Value != undefined) ? _Slider_Value : 100,
min: 1,
max: 100,
});
that will default to 100 if there is no value in _Slider_Value
You can override options of the slider with this string.
$('#slider-range-min').slider({value: 50});
Declare your variable globally to access it anywhere in web page. here is the tutorial link.
Try to declare variable without var key word to make it global
<script type="text/javascript">
_Slider_Value = 50;
</script>
if this is not working try binding the variable to window object
var myValue;
function setValue()
{
myValue = "test";
}
function getValue()
{
alert(window.myValue); // yup, it's "test"
}
here is the complete explanation, from which i have given example.
hope it works (not practically tried)