Develop Reference

How to fix Range on jQuery-UI slider and trigger function on hange

I have a basic form that calculates an estimated price based on quantity and one of three options. Then I tried to add a jQuery-UI slider. I need the slider to use the same values as the SELECT, in this case 10-100 but instead it seems to be using 19-109. This means I can't select the lowest value at all without using the SELECT and the max is right off the scale. I also need it to trigger my setAmount() function on slider change to update the price. I thought these would be easy to resolve but I'm still learning. I've included a jsfiddle and would be very appreciative if anyone could point me in the right direction.
Current Code:
<script type='text/javascript'>
$(document).ready(function(){
var select = $( "#quantity" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 10,
max: 100,
range: "min",
value: select[ 0 ].selectedIndex + 1,
slide: function( event, ui ) {
select[ 0 ].selectedIndex = ui.value - 1;
}
});
$( "#quantity" ).on( "change", function() {
slider.slider( "value", this.selectedIndex + 1 );
});
$('.containing-element').children().on("change", function () {setAmount();});
$("#quantity").on("change", function () {setAmount();});
});
</script>
https://jsfiddle.net/Bestrafung/2cwp9ud6/1

I believe you are getting incorrect behavior by using the selectedIndex from the #quantity select.
$(document).ready(function(){
var select = $( "#quantity" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
range: "min",
value: 10,
min: 10,
max: 100,
slide: function( event, ui ) {
select.val( ui.value );
},
change: function(event, ui){
setAmount();
}
});
$('.containing-element').children().on("change", function () {
setAmount();
});
select.on("change", function () {
setAmount();
slider.slider( "value", select.val() );
});
function setAmount(){
var a = select.val();
if (a <= 10){var q = 9.50}
else if (a > 10 && a <= 20){var q = 7.5}
else if (a > 20 && a <= 50){var q = 4.25}
else if (a > 50 && a <= 100){var q = 2.50}
if ($("#flip-min").val() == "noback") {$("#amount").val((a*q).toFixed(2));}
if ($("#flip-min").val() == "hookback") {$("#amount").val((a*(q+.5)).toFixed(2));}
if ($("#flip-min").val() == "stickyback") {$("#amount").val((a*(q+.6)).toFixed(2));}
}
});
This should correct the behavior by using ui.value and modifying the select.

jQuery slider filtering values

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")

click function not showing element

I need to show elements when a checkbox is checked and hide them when unchecked.
for (var id = 1; id <= N; id++) {
var $newSlider = $("<div/>", {
id: 'slider-' + id,
class: 'ui-slider'
}).slider({
range: 'min',
min: initVal,
max: N,
value: initVal,
step: 2,
slide: function( event, ui) {
$newResult.val( ui.value );
}
});
var $newResult = $('<input/>', {
type: 'text',
id: 'result-' + id,
class: 'sliderText',
value: '4'
});
var $x = $("<div/>", {
id: 'sliderContainer-' + id
}).append($newResult).append($newSlider);
$("#showSldr").append($x);
}
This is the function to show/hide them but it's not working:
$("body").on("click", "#showChck input", function() {
show_hide_sliders();
});
function show_hide_sliders() {
$("#showSldr>div").hide();
$("#showChck input").filter(":checked").filter(":visible").each(function() {
var id = this.id.replace(/\D/g, '');
$('#sliderContainer' + id).show();
});
}
The problem must be something I didn't notice...
The truth is originally the sliders (each one) were created the first time a checkbox is checked: http://jsfiddle.net/dhirajbodicherla/6vkyh4kL/10/
But I prefer to have them created and just show/hide, so that no matter what checkbox you check first they will always be in order (from 1 to 30): http://jsfiddle.net/6vkyh4kL/13/

jquery multiple slider insert values into textbox

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;
}
});
});
});

Multiple Jquery UI Slider non linear value

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);
}
});