I have multiple sliders that share a common maximum number, I am trying to capture those numbers now into text inputs, but I don't know what I am doing. The JavaScript will print
the numbers into a span no issue as long as the class is "spent". But doesn't work when I've tried it with a text input. I've also made a jsfiddle for this
http://jsfiddle.net/zkyks/
What would the proper way be to bind these values to inputs? I have done this individually by calling the id but I don't know how to to implement that here.
Thanks in advance.
JS
$(
function () {
var
maxValueSlider = 100,
maxValueTotal = 100,
$sliders = $("#eq .work_slider"),
valueSliders = [],
$displaySpentTotal = $('#spent');
$displaySpendable = $('#spendable');
function arraySum(arr) {
var sum = 0,
i;
for (i in arr) sum += arr[i];
return sum;
}
$sliders.each(
function (i, slider) {
var
$slider = $(slider),
$spent = $slider.next('.spent');
valueSliders[i] = 0;
$slider.slider({
range: 'min',
value: 0,
min: 0,
max: maxValueSlider,
step: 5,
animate: true,
orientation: "horizontal",
slide: function (event, ui) {
var
sumRemainder = arraySum(valueSliders) - valueSliders[i],
adjustedValue = Math.min(maxValueTotal - sumRemainder, ui.value);
valueSliders[i] = adjustedValue;
// display the current total
$displaySpentTotal.text(sumRemainder + adjustedValue);
$displaySpendable.text(maxValueTotal - sumRemainder - adjustedValue);
// display the current value
$spent.text(adjustedValue);
// set slider to adjusted value
$slider.slider('value', adjustedValue);
// stop sliding (return false) if value actually required adjustment
return adjustedValue == ui.value;
}
});
});
});
HTML
<div class="panel">
<label class="panel_label">Sliders %:</label>
<div id="eq">
1:<div id="work_slider1" name="work_slider1" class="work_slider"></div>
<input type="text" name="work_spent1" id="work_spent1" />
2:<div id="work_slider2" name="work_slider2" class="work_slider"></div>
<input type="text" name="work_spent2" id="work_spent2" />
3:<div id="work_slider3" name="work_slider3" class="work_slider"></div>
<input type="text" name="work_spent3" id="work_spent3" />
4:<div id="work_slider4" name="work_slider4" class="work_slider"></div>
<input type="text" name="work_spent4" id="work_spent4" />
</div>
<div id="spendable">100</div>
</div>
To make minimal changes in your code, you just need to add one line just before return statement in your slide: function (event, ui) {...}:
$(this).next().val(adjustedValue); //set the value of input next to slider
And remove the <br/> between <div> and <input>.
Or keep one <br/> and use:
$(this).next().next().val(adjustedValue);
Working example: http://jsfiddle.net/k8UkE/
Did some code edititing for the first slider. See if it helps
Replaced following // $displaySpendable = $('#work_spent1')
//$displaySpentTotal.val(sumRemainder + adjustedValue);
$displaySpendable.val(maxValueTotal - sumRemainder - adjustedValue);
$(function () {
var
maxValueSlider = 100,
maxValueTotal = 100,
$sliders = $("#eq .work_slider"),
valueSliders = [],
$displaySpentTotal = $('#spent');
$displaySpendable = $('#work_spent1');
function arraySum(arr) {
var sum = 0,
i;
for (i in arr) sum += arr[i];
return sum;
}
$sliders.each(
function (i, slider) {
var
$slider = $(slider),
$spent = $slider.next('.spent');
valueSliders[i] = 0;
$slider.slider({
range: 'min',
value: 0,
min: 0,
max: maxValueSlider,
step: 5,
animate: true,
orientation: "horizontal",
slide: function (event, ui) {
var
sumRemainder = arraySum(valueSliders) - valueSliders[i],
adjustedValue = Math.min(maxValueTotal - sumRemainder, ui.value);
valueSliders[i] = adjustedValue;
// display the current total
**$displaySpentTotal.val(sumRemainder + adjustedValue);
$displaySpendable.val(maxValueTotal - sumRemainder - adjustedValue);**
// display the current value
$spent.text(adjustedValue);
// set slider to adjusted value
$slider.slider('value', adjustedValue);
// stop sliding (return false) if value actually required adjustment
return adjustedValue == ui.value;
}
});
});
});
Related
I want to filter some text based on the attribute data-length. For example if the slider is in between the value 15 and 20, I want all the tags to be displayed where the data-length is between these two values and hide the all those that have in the data-length more than 20 or less than 15.
Here is a link what I tried so far but was not successful:
FIDDLE
the jQuery code:
$(function() {
$('#slider-container').slider({
range: true,
min: 0,
max: 100,
values: [0, 20],
create: function() {
$("#value").val("0 - 20");
},
slide: function(event, ui) {
$("#value").val(" " + ui.values[0] + " - " + ui.values[1]);
var mi = ui.values[0];
var mx = ui.values[1];
filterSystem(mi, mx);
}
})
});
function filterSystem(minPrice, maxPrice) {
$("#computers div.match js-match").hide().filter(function() {
var price = parseInt($(this).data("data-length"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
}
In your code there is no #computers id, so your selector won't run. You also do not have a div with the class match nor do you have a js-match node.
I would change your selector from #computers div.match js-match to em.match.js-match
You can also get the data length by using .attr('data-length'), or .data('length')
The result would be:
$("em.match.js-match").hide().filter(function () {
var price = parseInt($(this).data("length"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
Edit: Also change your selector from $("#computers div.match js-match") to just $(".js-match")
You would simply use $(this).data("length") instead of $(this).data("data-length")
I have this code:
for(i = 0; i < 1; i++){
$("body").append(questions[i]);
for(j = 0; j < prompts.length; j++){
var temp_id = "slider-" + j;
var temp_num_text_id = "slider-text-" + j;
var temptextdiv = $("<h5>50</h5>");
$("body").append(temptextdiv);
temptextdiv.attr('id', temp_num_text_id);
var tempdiv = $("<div></div>");
$("body").append(tempdiv);
tempdiv.attr('id', temp_id);
$("#" + temp_id).slider({
min: 0,
max: 100,
value: 50,
slide: function(event, ui){
$("#" + temp_num_text_id).html(ui.value);
}
});
}
}
The goal is to have one question with various prompts about the question, each being a ranking done on a jquery-ui slider. My trouble is trying to 'link' the text that displays the value of the slider with the slider itself. When I was testing this out with one slider it was as simple as the function within the declaration of the slider object shown above, but when this is done within a loop, all of the sliders only change the text value of the last slider. As I understand it from similar questions others have had, every iteration of the loop overwrites the previous declaration. How do I avoid this?
As I mentioned in the comment, all id attributes should be unique. This can be done by assigning a consecutive number to the ids.
For example: https://jsfiddle.net/Twisty/vLut8ysw/
JavaScript
var questions = [
"<div id='q1'>Question 1</div>",
"<div id='q2'>Question 2</div>",
"<div id='q3'>Question 3</div>",
"<div id='q4'>Question 4</div>",
"<div id='q5'>Question 5</div>",
];
var prompts = [
25,
50,
75,
];
var promptIds = 0;
$(function() {
$.each(questions, function(q, i) {
$(i).appendTo("body");
$.each(prompts, function(p, j) {
var temptextdiv = $("<h5>", {
id: "p-slider-text-" + promptIds
}).html(j).appendTo("body");
var tempdiv = $("<div></div>", {
id: "p-slider-" + promptIds
}).appendTo("body");
tempdiv.slider({
min: 0,
max: 100,
value: j,
slide: function(event, ui) {
temptextdiv.html(ui.value);
}
});
promptIds++;
});
});
});
This will create unique ids for each slider.
I have been searching and trying to find a solution for this but unfortunately can't get my way round it. I have multiple jQuery UI sliders which all have their values on sliding from an array. At the end I am trying to get the value of the slider and add it up with the other sliders. Here is the code for only two sliders:
$(function () {
var labelArr = new Array(0, 200, 400, 600);
$("#slider").slider({
values: 0,
min: 0,
max: labelArr.length - 1,
slide: function (event, ui) {
mbdata = labelArr[ui.value] + $("#slider_2").slider("value") + $("#slider_3").slider("value") + $("#slider_4").slider("value") + $("#slider_5").slider("value") + $("#slider_6").slider("value");
g1.refresh(mbdata);
}
});
});
$(function () {
var labelArr = new Array(0, 300, 900, 1200);
$("#slider_2").slider({
value: 0,
min: 0,
max: labelArr.length - 1,
slide: function (event, ui) {
mbdata = labelArr[ui.value] + $("#slider_3").slider("value") + $("#slider").slider("value") + $("#slider_4").slider("value") + $("#slider_5").slider("value") + $("#slider_6").slider("value");
g1.refresh(mbdata);
}
});
});
The first slider works good, but unfortunately when I slide the second one the values are not showing the array ones but simply 1 , 2 , 3
Can someone please try giving me some help
Many thanks
I changed the whole script, but hopefully its doing now what you want it to do - just extend the sliderRangesValues Array (and add a new div with the right ID) to add more slider and values. Its now a much more flexible script:
http://jsfiddle.net/fKUAe/1/
Dummy HTML:
<div id="slider0" class="slider"></div>
<div id="slider1" class="slider"></div>
<div id="slider2" class="slider"></div>
<input type="text" id="slidervalues" value="0" />
jQuery:
var sliderRangeValues = [
[0, 100, 200, 300],
[0, 300, 600, 900],
[0, 1, 2, 3, 4, 5]
];
function getAllSliderValues(sliderCount) {
var sliderValues = 0;
for (var i = 0; i < sliderCount; i++) {
var uiValue = $('#slider' + i).slider('value');
sliderValues += sliderRangeValues[i][uiValue];
}
$('#slidervalues').val(sliderValues);
}
function initSlider(i, sliderCount) {
$('#slider' + i).slider({
values: 0,
min: 0,
max: sliderRangeValues[i].length - 1,
slide: function (event, ui) {
$('#slider' + i).slider('value', ui.value);
getAllSliderValues(sliderCount);
}
});
}
$(function () {
var sliderCount = $('.slider').length;
for (var i = 0; i < sliderCount; i++) {
initSlider(i, sliderCount);
}
});
First question from me! I have search for possible ways to do this function that i want but could not find anything that helped me out..
I´m new at javascript and working with this as base:
http://jsfiddle.net/danieltulp/gz5gN/42/
When i adjust the Price-slider, i want to se what price in numbers that i´m searching for.
ex. search from 123$ - 900$
And the same with quality.
I´m also trying to make each slider have different min-max and values, is that possible?
$(function() {
var options = {
range: true,
min: 0,
max: 250,
step: 1,
values: [0, 250],
change: function(event, ui) {
var minP = $("#price").slider("values", 0);
var maxP = $("#price").slider("values", 1);
var minQ = $("#quality").slider("values", 0);
var maxQ = $("#quality").slider("values", 1);
showProducts(minP, maxP, minQ, maxQ);
}
};
2 functions are needed. One for each slider's onChange event. After each onChange function execution min and max values for each slider should be updated based on the calculation results. showProducts() will work in its current form.
This UX feels too complicated. Have you considered representing your data filtering somehow else?
This is how i solved it!
fiddle found here: http://jsfiddle.net/5PAa7/28/
i put it in to two variables instead of two functions.
function showProductsP(minP, maxP) {
$(".product-box").filter(function() {
var price = parseInt($(this).data("price"), 10);
if(price >= minP && price <= maxP){
$(this).show();
} else {
$(this).hide();
}
});
$(function() {
var options = {
range: true,
min: 0,
max: 900,
step: 5,
values: [0, 900],
slide: function(event, ui) {
var minP = $("#slider-price").slider("values", 0);
var maxP = $("#slider-price").slider("values", 1);
var minL = $("#slider-length").slider("values", 0);
var maxL = $("#slider-length").slider("values", 1);
$(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
showProducts(minP, maxP, minL, maxL);
}
};
var options_length = {
range: true,
min: 0,
max: 60,
step: 1,
values: [0, 60],
slide: function(event, ui) {
var minP = $("#slider-price").slider("values", 0);
var maxP = $("#slider-price").slider("values", 1);
var minL = $("#slider-length").slider("values", 0);
var maxL = $("#slider-length").slider("values", 1);
$(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
showProducts(minP, maxP, minL, maxL);
}
};
<p>Cost: $<span id="hddValue"></span></p>
<p>Cost2: $<span id="hddValue2"></span></p>
<select id="hdd">
<option>1000</option>
<option>2000</option>
<option>3000</option>
<option>4000</option>
<option>5000</option>
</select>
<select id="hdd2">
<option>1700</option>
<option>500</option>
<option>3700</option>
<option>4300</option>
<option>5070</option>
</select>
$(function () {
var select = $('#hdd');
var slider = $("<div id='slider'></div>").insertAfter(select).slider({
min: 1,
max: 5,
range: "true",
value: select[0].selectedIndex + 1,
slide: function (event, ui) {
select[0].selectedIndex = ui.value - 1;
$("#hddValue").text($('#hdd option:selected').text());
$("#hddValue2").text($('#hdd2 option:selected').text());
}
});
//show start value
$( "#hddValue" ).html( $('#slider').slider('value') );
$( "#hddValue2" ).html( $('#slider').slider('value') );
});
Can anyone please help me with this js script? What i want to do is when I move the slider i want each selected values to show up on the page as seen on two option values "hdd" and "hdd2".
right now what happens is when i move the slider only #hdd changes and when i add #hdd2 in the javascript, the hdd2 html view just freezes to the first option and doesn't change.
thank you in advance.
Your update method only updates both selects but with the value of the first one.
Havent tried it but it should look something like this, btw. having mutliple elements with the same id (your sliders) is invalid and breaks older browsers.
<p>Cost: $<span class="hddvalue"></span></p>
<p>Cost2: $<span class="hddvalue"></span></p>
<select id="hdd">
<option>1000</option>
<option>2000</option>
<option>3000</option>
<option>4000</option>
<option>5000</option>
</select>
<select id="hdd2">
<option>1700</option>
<option>500</option>
<option>3700</option>
<option>4300</option>
<option>5070</option>
</select>
$(function () {
var
$selects = $('#hdd,#hdd2'),
$values = $('.hddvalue')
;
$selects.each(function (i) {
var sel = this;
$("<div class='slider'></div>").insertAfter(select).slider({
min: 1,
max: 5,
range: "true",
value: sel.selectedIndex + 1,
slide: function (event, ui) {
sel.selectedIndex = ui.value - 1;
$values.eq(i).text(jQuery(this).find('option:selected').text());
}
});
});
//show start value
$values.eq(0).html( $('.slider').eq(0).slider('value') );
$values.eq(1).html( $('.slider').eq(1).slider('value') );
});
$(function () {
var
$selects = $('#hdd,#hdd2'),
$values = $('.hddvalue');
$selects.each(function (i) {
var sel = this;
$("<div class='slider'></div>").insertAfter(sel).slider({
min: 1,
max: 5,
range: "true",
value: sel.selectedIndex + 1,
slide: function (event, ui) {
sel.selectedIndex = ui.value - 1;
$values.eq(i).text(jQuery(this).find('option:selected').text());
}
});
});
//show start value
$values.eq(0).html( $('.slider').eq(0).slider('value') );
$values.eq(1).html( $('.slider').eq(1).slider('value') );
});