We Keep Coding

How to be able to use HTML slider with arrow keys

I have this code written up to and the issue I am having is moving the slider with arrow keys, it works if I first click the slider but I want it to work on the page load without having to click the slider first and am not sure how to accomplish that.
<script>
function updateImage(sliderValue) {
document.getElementById("image").src =
"img"
+ sliderValue + ".png";
}
document.getElementById('slider').addEventListener(function() {
this.focus();
});
</script>
<div class="slider-container">
<input type="range" min="0" max="384" value="0" step="6"
oninput="updateImage(this.value)" id="slider"/>
</div>
<img id="image" src="img.png" width="1144" height="898">

Add a keydown listener on the document that checks the event key code (from which it determines the key pressed), and changes the slider value accordingly:
document.addEventListener('keydown', function(e) {
if (e.keyCode == 39) { //right
slider.value = +slider.value + +slider.step;
} else if (e.keyCode == 37) { //left
slider.value = +slider.value - +slider.step;
}
updateImage(slider.value)
})
function updateImage(sliderValue) {
console.log(sliderValue)
document.getElementById("image").src =
"img" +
sliderValue + ".png";
}
<div class="slider-container">
<input type="range" min="0" max="400" value="384" step="6" id="slider" oninput="updateImage(this.value)" />
</div>
<img id="image" src="img.png">

The first thing, you can do your job with two different ways, one is simple and not entirely active, and the second is great but more complicated:
The First way:
You can add a onload event for the window, and when the window is loaded you can focus on the slider input, and this will makes it possible to use arrow keys for move your slides right and left.
and instead of saying:
document.getElementById('slider').addEventListener(function() {
this.focus();
});
You can say that:
window.onload = function() {
document.getElementById("slider").focus()
}
And this will put the focus on your input directly when the window is finishes loading.
This is the easy way to use arrow buttons to navigate your slider,
But there is another advanced way to do this.
The Second way:
You can use the keyEvents on the window itself again but not for pushing the focus to the input range, you will use it for getting what's clicked whatever where, and if the clicked button is one of the arrow left or right buttons, increase or decrease the value of the slider, and run the updateImage with the new value
and this is the code that you need to put after the updateImage function:
window.addEventListener("keydown", (e) => {
let slider = document.getElementById("slider")
if( e.key === "ArrowLeft" ) {
e.preventDefault()
slider.value -= 1
updateImage(slider.value)
}
else if( e.key === "ArrowRight" ) {
e.preventDefault()
slider.value = Number(slider.value) + 1
updateImage(slider.value)
}
})
Here in this code, you will find that I apply the function whenever a keydown event happens in the window, whatever where.
And inside the function, I got the slider, then check for the arrow left and right keys, inside the two condition I prevent default actions of the buttons, but you can delete this part, then I increase or decrease the slider value by one, "In your case add or remove 6, because you set the step to 6",
then I updateImage mySelf with the new value, and that's because changing the input value from javascript will not run your oninput event attached to the input.
And now, you can click on the right and left arrows while you are not even focus on the input, and the images will still changed and the slider itself will still changed.
I hope I managed to solve your problem.

My solution of your problem.
const slider = document.getElementById('slider');
slider.addEventListener(e => {
switch(e.key) {
case "ArrowLeft":
// Left arrow logic
break;
case "ArrowRight":
// Right arrow logic
break;
}
});

Faking a toggle switch with an Input Range, dealing with custom range

I need to fake a toggle switch with an input range.
The idea is to create a short range, with just 2 values, min and max. the css button will match one end of the range. So far you click on it, the div containing the range will move a bit bringing the other end of the ranger under your mouse.
I have this function, which applies on all input ranges on the page. But i need to apply it only on some classes, not all. But i can't find the right syntax and it doesn't work.
The Javascript:
$('input[type="range"]').on('change', function() {
$('div#launcher01').css('margin-top', parseInt($(this).val() ) > 0 ? parseInt($(this).val() ) + 'px' : '0px');
});
CSS:
.fakbl input {
height: 50px;
width: 50px;
HTML:
<div id="launcher01">
<div class="fakbl">
<input type="range" id="launch01" name="launch01" min="0" max="50" step="50"" />
</div>
</div>
Fiddle

Since you are already using jQuery, you can phrase your widget-maker as a jQuery plugin as follows :
$.fn.rangeButton = function(containerSelector) {
return this.each(function() {
var $self = $(this);
$self.on('change', function() {
$self.closest(containerSelector).css('margin-left', ($self.val()/3) > 0 ? ($self.val()/3) + 'px' : '0px');
}).trigger('change'); // trigger 'change' immediately to initialize everything.
});
};
Now, invoke the widget on each of your ranges, and pass a selector for the appropriate container :
$('#launcher01 input[type="range"]').rangeButton('#launcher01');
$('#launcher02 input[type="range"]').rangeButton('#launcher02');
Demo
Alternatively, by giving all containers the same class, you can invoke all your widgets with a single command :
$('.myClass input[type="range"]').rangeButton('.myClass');
Demo

May I ask a refinement please?
I completed the fake button. As you can see in this FIDDLE
(the white box will disappear, I added some opacity to it just to show that the button is working)
The red box (now green due to my buggy code part) is in the background and I would need it to change color depending on the status. I tried this but it doesn't work.
Here the code:
$.fn.rangeButton = function(containerSelector) {
return this.each(function() {
var $self = $(this);
$self.on('change', function() {
$self.closest(containerSelector).css('margin-left', ($self.val()/3) > 0 ? ($self.val()/3) + 'px' : '0px');
// this part is not working, if you remove this part, the button works flawlessy
if ($self = 100) {
document.getElementById("fakbuttonsfondo01").style.backgroundColor="rgb(0, 191, 1)";
} else {
document.getElementById("fakbuttonsfondo01").style.backgroundColor="rgb(0, 0, 255)";
}
// end of buggy code
}).trigger('change'); // trigger 'change' immediately to initialize everything.
});
};
$('#launcher01 input[type="range"]').rangeButton('#launcher01');
$('#launcher02 input[type="range"]').rangeButton('#launcher02');
Thanks:)

Live output in jQuery HTML5 range slider

I'm trying to get a live output from a HTML5 input range slider into a javascript variable. Right now, I'm using <input type="range" id="rangevalue" onchange="arduino()">
The way I have it working is doing what I want, but it's not "live."
I want to have it so while you're dragging the slider, it updates the variable, and not only once you let go. For example: when I'm dragging the slider from 1 to 5, I want the variable to update while I'm dragging, so it will update with 1,2,3,4,5 and not only jump from 1 to 5 once I release the slider.
Is it possible to do such a thing? Any recommendations? I was using the jQuery slider plugin, but it was not touch compatible, which eliminated its purpose.
Thanks for all help in advance!
EDIT - I must not have explained well enough, I know how to get the value of a range slider, I just want to get a "live" output from it.

$("#rangevalue").mousemove(function () {
$("#text").text($("#rangevalue").val())
})
jsFiddle example
Or in plain JS:
var inp = document.getElementById('rangevalue');
inp.addEventListener("mousemove", function () {
document.getElementById('text').innerHTML = this.value;
});

Yes it is possible. What we need to do is use .mousedown() and .mouseup() with a Boolean value to keep track that we are holding down the mouse mousedown. When the mouse is held down set mousedown to true and use a setTimeout that keeps updating the value. This way while you are dragging slider the value is being constantly updated. For example:
HTML
<label id="text">0</label>
<input type="range" value=0 min=0 max=10 id="rangevalue">
JavaScript
var mouseDown = false
$("#rangevalue").mousedown(function() {
mouseDown = true;
updateSlider()
});
$("#rangevalue").mouseup(function() {
mouseDown = false;
});
function updateSlider() {
if(mouseDown) {
// Update the value while the mouse is held down.
$("#text").text($("#rangevalue").val());
setTimeout(updateSlider, 50);
}
}
Here is a fiddle

You could also use the oninput attribute.
<input type="range" min="5" max="10" step="1"
oninput="arduino()" onchange="arduino()">
More Information on Bugzilla

I think, this solution a good fit for this problem
$("#rangevalue").on("input", function(){
updateSlider()
});
function updateSlider() {
// Update the value while the mouse is held down.
$("#text").text($("#rangevalue").val());
setTimeout(updateSlider, 50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<label id="text">0</label>
<input type="range" value=0 min=0 max=10 id="rangevalue">

I think it is working with your Code.
<input type="range" id="rangevalue" onchange="arduino()">
<p id="t"></p>
<script>
function arduino() {
document.getElementById("t").innerHTML = document.getElementById("rangevalue").value;
}</script>
JSFiddle

Getting value of jQuery slider

html
<h1>HTML Slider Test</h1>
<div class="slider" data-max="100"></div>
<p>Your slider has a value of <span class="slider-value"></span></p>
<input type="button" value="send" class="send">
<div class="slider" data-max="400"></div>
<p>Your slider has a value of <span class="slider-value"></span></p>
<input type="button" value="send" class="send">
jQuery
var a = 0;
$(".slider").each(function() {
$(this).slider({
value : 5,
min : 1,
max : $(this).data('max'),
step : 1,
slide : function (event, ui) {
a = ui.value;
$(this).next().find('span.slider-value').html(ui.value);
}
});
});
$(".send").click(function () {
var c=$(".slider-value").text();
alert(c);
});
on clicking first button i want value of that alone..but i am getting the value of both sliders.
http://jsfiddle.net/5TTm4/1906/

$(".slider-value") is returning both fields. Use Refiners to get a specific one.
Example:
$(".slider-value").first()
$(".slider-value").last()
http://jsfiddle.net/5TTm4/1909/
Dynamic solution
Simply create the button and its click event on the fly (or attach to an inline button) when creating the slider.
var a = 0;
$(".slider").each(function() {
var slider = this;
$(slider).slider({
value : 5,
min : 1,
max : $(this).data('max'),
step : 1,
slide : function (event, ui) {
a = ui.value;
$(this).next().find('span.slider-value').html(ui.value);
}
});
var button = $('<button>send</button>');
$(button).click(function() {
alert( $(slider).slider("option", "value"));
});
$(slider).next().find('span.slider-value').after($("<br />"), button);
});
Demo

You need a way of identifying the slider value you want to take, which currently wasn't possible without hardcoding it: .prev().prev().find(...blabla), which is a bad way of doing it, since your structure might change.
I updated your jsfiddle to make it work and give an example of how to easily do this using a data attribute and an ID: http://jsfiddle.net/5TTm4/1908/
You basicly give the button a selector of what element it is 'bound' to: data-slider="#slider-value-2"
You also give the slider value an id that matches that selector: id="slider-value-2"
Modify the onClick function:
var $this = $(this);
var c=$($this.attr('data-slider')).text();
Now you have a flexible way of retrieving values and binding elements to the buttons without being dependent on the dom. I suggest using the same technique for binding the value elements to the slider itself.
While i'm at it: cache the value of $(this), it's faster and saves you a lot of scoping issues if you expand your code.
$(".slider").each(function() {
var $this = $(this);
$this.slider({
value : 5,
min : 1,
max : $this.data('max'),
step : 1,
slide : function (event, ui) {
a = ui.value;
$this.next().find('span.slider-value').html(ui.value);
}
});
});

Change text box quantity, change picture upon hover with jQuery/Javascript

I would like to do 2 things in jQuery or Javascript,
Change with quantity in a text box with up and down arrows. The default qty is 1, and I want to increment by 1 when a user clicks the up arrow, and vice versa.
Can I change the arrow to another picture (color) when the mouse hovers on it?
Thank you.

I would recommend using click() command for changing the value in a textbox and the hover() command for changing the arrow to another picture (color)
for example, for the incrementer
$('#myImg')
.click( function() {
var num = $('#myTextbox').text();
if (!isNaN(num))
$('#myTextbox').text(parseInt(num,10) + 1);
.hover(
function() { $(this).css('background-image','over.jpg'), //over
function() { $(this).css('background-image','out.jpg') // out
)

1.)
<script>
function increase() {
var textbox = document.getElementById('textbox');
textbox.value = parseInt(textbox.value) + 1;
}
</script>
<input id="textbox" name="textbox" type="text" value="1">
up
2.) Should be down with CSS :hover