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.
Related
I am trying to set the min,max and step values of a slider using Javascript. I know we can set them as range properties in HTML, but I am specifically looking for an option to use javascript. because my range will vary depends upon condition.
HLML:
<input type="range" id="LoanAmntRange" class="LoanAmntRange">
<input type="text" id="LoanAmntText"></input>
Javascript:
$(function() {
$('#LoanAmntText').val($(LoanAmntRange).val());
$('input[type="range"]').on('input change', function() {
$("#LoanAmntRange").slider('value', 50, 80);
$('#LoanAmntText').val($(this).val());
});
});
$('#LoanAmntText').on("change",function(){
var val = $(this).val().replace(/[^\d\+]/g,""); // check only for digits
$('#LoanAmntRange').val(val).trigger("change");
});
I was going through some of the old discussion and and they have mentioned that the values can be adjusted using below options
Adjust min and max:
$("#LoanAmntRange").slider('value', 50, 80);
Adjust step value:
$("#LoanAmntRange").slider("option", "step", 10);
But its not working for me. Is there anyway I can do it ?
Fiddle: https://jsfiddle.net/k7qf58ex/1/
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.
Maybe I'm just not getting something simple here, but I am not able to set the min and max values as the same as the handle values in my jQuery slider. The min and max are dynamically defined via php variables, and when the slider first appears, I want it's range to be the same as the range between the min and the max, i.e. the entire slider. If the user wants to then make changes, they can do so -- it is for an ajax search filter.
When I try the below code, the range sliders get stuck all the way to the left and cannot be moved.
Here is my js:
var pay_max = $('#pay_max').html();
var pay_min = $('#pay_min').html();
$(function() {
$( "#pay_range" ).slider({
range: true,
min: pay_min,
max: pay_max,
values: [ pay_min, pay_max ],
slide: function( event, ui ) {
$( "#filter_by_pay" ).html( "Pay Range: ¥" + ui.values[ 0 ] + " - ¥" + ui.values[ 1 ] ).css("color", "black");
}
});
my html:
<div class = "hidden" id="pay_max"><?=max($all_teachers['pay']);?></div>
<div class = "hidden" id="pay_min"><?=min($all_teachers['pay']);?></div>
<div class = "filter_options" id="pay_filter">
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
<div id ="pay_range"></div>
</div>
It works okay if I, for instance, change the min to 0, but that is not the goal. I only want the range slider to be within the bounds of the initial values, which also happen to be the min and max.
You are trying to use string values where you need numbers:
Try:
var pay_max = 1*$.trim($('#pay_max').html());
var pay_min = 1*$.trim($('#pay_min').html());
used $.trim to be sure don't have any whitespace
I'm using Sparklines and am trying to draw a simple blox plot with predetermined min, max, whiskers, quartiles, and one additional value -- the user's value that might fall within the quartile or outside (the whole point is to show the user where his/her value falls in the distribution)
What is the appropriate way to do this? I can get a basic box up but can't see how to lay a point on top of it. Also I can't see how to set min and max but it looks like the outliers sort of do this.
Here's my code:
<script type="text/javascript">
$(function() {
var myboxvalues = [0, 200, 450, 500, 550, 800, 1000];
$('.inlinebox').sparkline( myboxvalues, {type: 'box', raw: true });
});
</script>
</head>
<body>
<p>
My box: <span class="inlinebox"></span>
</p>
Thanks!
The flag is "target: ..."
{type: 'box', raw: true, target: 713 }