We Keep Coding

jQuery UI Slider Missing BG

I'm using a range slider with jQuery UI but when I move the slider, the background line does not show up so it's hard to tell where it is at. How do I highlight the background line only for the selected portion?
jsfiddle is below.
https://jsfiddle.net/zbmt5qrn/
/* INTEREST RATE SLIDER */
$("#interestRange").slider({
min: 0,
max: 100,
step: 1,
values: [10],
slide: function(event, ui) {
for (var i = 0; i < ui.values.length; ++i) {
$("input.interestValue[data-index=" + i + "]").val(ui.values[i]);
}
}
});
$("input.interestValue").change(function() {
var $this = $(this);
$("#interestValue").slider("values", $this.data("index"), $this.val());
});
function handleInterestChange(input) {
if (input.value < 0) input.value = 0;
if (input.value > 24) input.value = 24;
}
var items =[ '8%','24%'];
var oneBig = 100 / (items.length - 1);
$.each(items, function(key,value){
var w = oneBig;
if(key === 0 || key === items.length-1)
w = oneBig/2;
$("#interestLabel").append("<label style='width: "+w+"%'>"+value+"</laben>");
});

I am removing the code about '8%/24%' because it does not seem to be relevant to this question.
There are a couple ways to set the background. You could insert a new element inside #interestRange and change its width based on the slider value. But if you do not need to worry about supporting outdated browsers, it would be much easier to use apply a linear-gradient to the background of #interestRange.
const sliderMin = 0
const sliderMax = 100
const sliderDefaultValue = 10
function setSliderBackground(value){
const sliderRange = sliderMax - sliderMin
const sliderPercent = Math.floor(100 * (value / sliderRange))
$("#interestRange").css({
background: `linear-gradient(90deg, #0000ff ${sliderPercent}%, #ffffff ${sliderPercent}%)`
})
}
function setSliderValue(value){
$("#interestRange").slider("value", value);
}
function setInputValue(value){
$("#interestValue").val(value)
}
$(document).ready(()=>{
$("#interestRange").slider({
min: sliderMin,
max: sliderMax,
step: 1,
// Handle when the user moves the slider
slide: (event, ui)=>{
const sliderValue = ui.value
setInputValue(sliderValue)
setSliderBackground(sliderValue)
}
})
// Handle when the user types in a value
$("#interestValue").change(()=>{
const typedValue = $("#interestValue").val()
setSliderValue(typedValue)
setSliderBackground(typedValue)
})
// Stuff to do when the page loads
setSliderValue(sliderDefaultValue)
setInputValue(sliderDefaultValue)
setSliderBackground(sliderDefaultValue)
})
<link href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<p>Interest Rate:</p>
<div>
<div id="interestRange"></div>
<div id="interestLabel"></div>
</div>
<div>
<input type="number" id="interestValue" />
</div>

How to input cents with mottie keyboard and keep them there?

I am going crazy over here... I've invested over 16 hours trying to get this thing to work, if anyone has any clue of the reason of this evil behavior please advice..
I have multiple inputs of type number inside a form where I attached the keyboard to each input like this:
$('.amount').keyboard({
layout: 'custom',
customLayout : {
'normal' : ['1 2 3', '4 5 6', '7 8 9','{clear} 0 {bksp}','{accept}']
},
display : {
'accept' : 'Confirm:Confirm (Shift-Enter)',
'bksp' : 'Delete:Delete',
'clear': 'Clear:Clear'
},
beforeVisible: function(e, keyboard, el) {
$("#"+keyboard.$keyboard[0].id).addClass("hide-me");
},
restrictInput: true,
preventPaste: true,
autoAccept: true,
usePreview: false,
useWheel: false,
repeatRate: 0,
// this function is so I can display cents in the input
// there is no decimal in the keyboard as part of the requirements
change: function(e, keyboard, el) {
if (el.value === null || el.value === "") {
el.value = "0.00";
}
el.value = parseInt(el.value);
el.value = el.value * 0.01;
},
// this function is so I can display cents in the inputs
// there is no decimal in the keyboard as part of the requirements
accepted: function(e, keyboard, el) {
if (el.value === null || el.value === "") {
el.value = "0.00";
}
el.value = parseInt(el.value);
el.value = el.value * 0.01;
},
caretToEnd: 'true',
maxLength : '20',
css: {
container: 'center-block dropdown-menu custom-keypad',
buttonDefault: 'btn-kb',
buttonHover: 'btn-primary',
buttonAction: 'active',
buttonDisabled: 'disabled'
}
});
Keyboard pops up as it should, I can see the decimals in my input correctly as I type and as I confirm my input. My goal is to sum all the input.val() and validate them as soon any change happens on the form. That functionality to do that is like this:
$('form').on('change', '.amount', function () {
var balance = NUMBER;
var sum = 0;
$(".amount").each(function (){
var valTotal = Number($(this).val());
if (!isNaN(valTotal)) {
sum += valTotal;
}
});
if (sum > balance) {
//stuff happens
}
});//.end of form
Here is where the problem starts, when I go to sum the inputs, my decimals disappear! what was 22.22 is now 2222 so my sum is wrong, causing my sum to be always larger that my balance. I tried to create a fiddle but it won't pop the keyboard on the result box so I can't show you a live example..
This are the CDN's I'm using:
https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.26.17/js/jquery.keyboard.extension-all.min.js
https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.26.17/js/jquery.keyboard.min.js
PLEASE ADVICE!!

So I got in touch with the creator of the plugin and he was kind enough to answer my question via email. His solution worked perfectly!
You can see the fiddle right here..
http://jsfiddle.net/Mottie/egb3a1sk/2506/
/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function() {
// this function is so I can display cents in the input
// there is no decimal in the keyboard as part of the requirements
function convert(el) {
var value = el.value;
if (el.value === null || el.value === "") {
value = "0.00";
}
value = parseInt(value, 10);
value = value * 0.01;
el.value = value.toFixed(2);
}
NUMBER = 100;
function sum() {
var balance = NUMBER;
var sum = 0;
$(".amount:not(:disabled)").each(function() {
var valTotal = Number($(this).val());
if (!isNaN(valTotal)) {
sum += valTotal;
}
});
if (sum > balance) {
//stuff happens
}
$('.sum').text(sum);
}
$('.amount').keyboard({
layout: 'custom',
customLayout: {
'normal': ['1 2 3', '4 5 6', '7 8 9', '{clear} 0 {bksp}', '{accept}']
},
display: {
'accept': 'Confirm:Confirm (Shift-Enter)',
'bksp': 'Delete:Delete',
'clear': 'Clear:Clear'
},
beforeVisible: function(e, keyboard, el) {
$("#" + keyboard.$keyboard[0].id).addClass("hide-me");
},
restrictInput: true,
preventPaste: true,
autoAccept: true,
usePreview: false,
useWheel: false,
repeatRate: 0,
change: function(e, keyboard, el) {
convert(el);
},
accepted: function(e, keyboard, el) {
convert(el);
sum();
},
caretToEnd: 'true',
maxLength: '20',
css: {
container: 'center-block dropdown-menu custom-keypad',
buttonDefault: 'btn-kb',
buttonHover: 'btn-primary',
buttonAction: 'active',
buttonDisabled: 'disabled'
}
});
});
The main issue was that the $('.amount') selector was including a hidden duplicate input so he changed it to $(".amount:not(:disabled)")
And he also performed the sum() operation right after the formatting happened on 'accepted'
Worked perfectly =)

How to get multiple sliders to work with java script/html/jquery

I'm currently working on a site that hosts podcasts. I have it so the podcasts plays, but I can only get very first podcast volume slider to work; the second podcast's sliders moves, but doesn't change the volume at all. Each player has a "player" id that is used to identify it. I've everything else and am stuck on this one little bug. Any help would be appreciated. Here is the javascript that creates the sliders and tries to links them to each player:
<script>
audiojs.events.ready(function()
{
var as = audiojs.createAll();
$('.slider').each(function()
{
var slider = $('.slider'),
tooltip = $('.tooltip'),
audioList = document.getElementsByTagName("audio").length;
console.log(audioList)
tooltip.hide();
slider.slider(
{
range: "min",
min: 0,
max: 100,
value: 50,
change: function()
{
for (var i = 0; i <= as.length; i++)
{
//console.log(i)
var value = $(".slider").slider("value");
document.getElementById("player").volume = (value / 100);
};
},
start:function(event,ui)
{
tooltip.fadeIn('fast');
},
slide: function(event, ui)
{
var volume = $('.volume'),
value = $(".slider").slider("value");
document.getElementById("player").volume = (value / 100);
tooltip.css('left',value / 2).text(ui.value);
if(value <= 5)
{
volume.css('background-position', '0 0');
}
else if (value <= 25)
{
volume.css('background-position', '0 -25px');
}
else if (value <= 75)
{
volume.css('background-position', '0 -50px');
}
else
{
volume.css('background-position', '0 -75px');
};
},
stop:function(event,ui)
{
tooltip.fadeOut('fast');
},});});}); </script>

jQuery UI Slider displays initial value on lowest setting

I have the following script for a jQuery UI slider. The script shows the amount in a div with id #skizzar_payment_amount
When I scroll to the lowest amount (0), the value in the div shows the initial amount instead of 0.
See here:
<script>
jQuery(function($) {
var initialValue = 7.5;
var maxValue = 20;
var stepValue = 0.25;
var sliderTooltip = function(event, ui) {
var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start)
var tooltip = '<div class="tooltip"><div class="tooltip-inner">£' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
$("#skizzar_payment_amount").val(ui.value); //change amount in hidden input field
}
$("#slider").slider({
value: initialValue,
min: 0,
max: maxValue,
step: stepValue,
create: sliderTooltip,
slide: sliderTooltip,
});
$("#skizzar_payment_amount").val($("#slider").slider("value"));
});
</script>
https://jsfiddle.net/yzzvd52y/

ui.value will be 0, which is false in this line: var curValue = ui.value || initialValue;
Change it to e.g.:
var curValue = ui.value !== undefined ? ui.value : initialValue;
Updated fiddle

I updated your fiddle and added the following code:
change: function( event, ui ) {
$("#skizzar_payment_amount").val(ui.value);
}

Try this:
jQuery(function($) {
var initialValue = 7.5;
var maxValue = 20;
var stepValue = 0.25;
var sliderTooltip = function(event, ui) {
var curValue = ui.value >= 0 ? ui.value : initialValue; // current value (when sliding) or initial value (at start)
var tooltip = '<div class="tooltip"><div class="tooltip-inner">£' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
$("#skizzar_payment_amount").val(ui.value); //change amount in hidden input field
}
$("#slider").slider({
value: initialValue,
min: 0,
max: maxValue,
step: stepValue,
create: sliderTooltip,
slide: sliderTooltip,
change: function(event, ui) {
$("#skizzar_payment_amount").val(ui.value);
}
});
});

Jquery ui slider move to the next value

Here's a sample image of what i'm trying to accomplish
Say I click from 150 value the handle should only move to 50 and not jump to 150. I click again it move from 50 to 100.
The other way around, say the handle is on value 150 then i click on value 5, it should not jump directly to 5 it should move from 150 to 100.
How can I do that?
Here's my code:
var valMap = [5, 10, 20, 50, 100, 150];
value = 0;
var slider = $("#slider").slider({
disabled: false,
animate: true,
min: 0,
max: valMap.length - 1,
slide: function (event, ui) {
slider.slider("option", "animate", "slow");
},
change: function () {
var Slideval = $(this).slider('value');
console.log(Slideval, value)
if(value < Slideval) {
console.log("incremented")
} else if(value > Slideval) {
console.log("decremented")
}
value = Slideval;
}
});
Here's a sample jsfiddle: http://jsfiddle.net/endl3ss/jNwww/21/

I don't know the slider too much, but here is a working solution based on your specification:
http://jsfiddle.net/5xMMz/11/
and here is the full code for reference
var valMap = [5, 10, 20, 50, 100, 150,500,1000,5000];
value= 0;
var lastSlideValue = 0;
var internalSlideCalling = false;
var slider = $("#slider").slider({
disabled : false,
animate : true,
min : 0,
max : valMap.length - 1,
slide : function(event, ui) {
slider.slider("option", "animate", "slow");
},
change: function(){
var Slideval = $(this).slider('value');
if (!internalSlideCalling)
{
if (Slideval>lastSlideValue && lastSlideValue < $(this).slider('option','max'))
{
Slideval = lastSlideValue+1;
}
else if (lastSlideValue > $(this).slider('option','min'))
{
Slideval = lastSlideValue-1;
}
lastSlideValue = Slideval;
}
console.log(Slideval, value)
if(value < Slideval) {
console.log("incremented")
} else if(value > Slideval){
console.log("decremented")
}
value = Slideval;
if (!internalSlideCalling){
internalSlideCalling = true;
$(this).slider('value',Slideval);
}
else
internalSlideCalling = false;
}
});
$("#slider").slider('values',valMap);

Then you can use event which will raise when we move slider and then set the value for slider.We can manually set the slider value.
This is event code
slide: function( event, ui ) {
// code
},
$('#id').slider("value",value); //using this we can set the slider value

Use
$("#slider").slider({
step: 50
})
Here is the link for more information - http://jqueryui.com/slider/#steps