I have a slider and span which display the value of the changing value like this:
var slider = document.getElementById("myRange");
var output = document.getElementById("dynamicSet");
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
let update = () => output.innerHTML = slider.value;
slider.addEventListener('input', update);
update();
const setAmount = document.getElementById("dynamicSet").innerHTML;
console.log(setAmount);
<div class="slidecontainer">
<p>Aantal sets: <span id="dynamicSet"></span></p>
<input type="range" min="1" max="10" value="50" class="slider" id="myRange">
</div>
The webpage displays the changing value which works great! However when I try to console log it, it just shows the initial value the slider is at. I am trying to push this value to a DB (with a clikc of a submit button) but I noticed the value stayed the same as in the initial when opening the page:
I need the back end value to change as well. How can do this? i thought that the even listener already took care of this..
please check this, hope it will work :-)
var slider = document.getElementById("myRange");
var output = document.getElementById("dynamicSet");
var isShow = true
output.innerHTML = slider.value
update=()=>{
output.innerHTML = slider.value;
// Display the default slider value
console.log(slider.value)
}
// Update the current slider value (each time you drag the slider handle)
//let update = () => output.innerHTML = slider.value;
slider.addEventListener('input', update);
<div class="slidecontainer">
<p>Aantal sets: <span id="dynamicSet"></span></p>
<input type="range" min="1" max="10" value="50" class="slider" id="myRange">
</div>
you can try this
let update = () => {
output.innerHTML = slider.value;
console.log(slider.value)
}
Related
I am currently working on a dynamic progress bar that should fill up everytime I click on the button(Meaning increasing the width of the element inside the bar container), The way I am doing it is like that:
let btn = document.getElementById('click');
let adj = add_bar.style.width = "";
btn.addEventListener('click', ()=>{
adj = "10%";
})
And I have done some other attempts, but they all ended up with the same result.
can you give me hints at least?
thank you
The reason your code is not working is because you are setting the width to 10% every time you click it, rather than incrementing.
Instead, use +=:
let add_bar = document.querySelector('progress');
let btn = document.getElementById('click');
btn.addEventListener('click', function() {
add_bar.value += 10;
})
<progress value="0" min="0" max="100"></progress>
<br/>
<button id="click">Increase Progress</button>
I want to create a range input for pixels. Something similar to:
let input = document.querySelector("input");
input.addEventListener("change", () => {
console.log(input.value);
});
<input type="range" min="5px" max="50px">
However, it does not understand pixels.
Range inputs only support numbers, short of implementing your own UI with a mass of JS you aren't going to get it to put the letters px on the value.
Add them yourself when you read it.
let input = document.querySelector("input");
input.addEventListener("change", () => {
console.log(`${input.value}px`);
});
<input type="range" min="5" max="50">
Is there a way to make the range slider's first step be filled in instead of being on the edge? For example this would be step 1 and the user would NOT be able to pull it anymore left.
<input type="range" min="1" max="5" step="1" oninput="console.log(this.value);">
Here's a working example. Hope it helps.
var slider = document.getElementById("slider");
var output = document.getElementById("output");
// To accommodate all browsers (IE), two events need to be set up.
slider.addEventListener("input", fixSlider);
slider.addEventListener("change", fixSlider);
function fixSlider(evt){
// If the value goes below 3, reset it to 3
if(parseInt(this.value,10) < 3){
this.value = 3;
}
output.textContent = this.value;
}
<input type="range" min="1" max="5" id="slider"><span id="output">3</span>
I'm trying to programmatically update the position of my input slider (type="range").
I'm setting the value, however, that won't update the position of the slider.
I've also tried using:
element.dispatchEvent(new Event('input'))
to force an input change. This event does fire, however, the slider won't visually update.
function changeSliderPosition(position) {
let e = document.getElementById('mySlider');
e.value = position;
//Also set the position of the slider to position
}
I've seen some solutions that work in JQuery, but I don't want to include an entire library or even use it at all for such a seemingly small issue.
I'd appreciate any help with this problem!
Assuming that your slider (input type="range") has its min and max attributes set, all you need to do is set the value:
let input = document.getElementById("in");
let btn = document.querySelector("button");
let slider = document.querySelector("input[type='range']");
btn.addEventListener("click", function(){
slider.value = input.value;
});
Enter the value you want: <input id="in"><button>Go!</button><br>
<input type="range" min="1" max="100">
I have a html slider and I want to dynamically change the position of the cursor on the slider.
Look at here my jsfiddle demo : http://jsfiddle.net/8DCS6/
<input type="range" id="slider" min="0" max="14" value="14" />
<input type="button" id="b" value="Update slider"/>
var b = document.getElementById("b");
var slider = document.getElementById("slider");
b.onclick = function() {
slider.setAttribute("value","10");
};
I put the max value to the 14 and I have a button. When I click on the button, I want to change the position of the cursor and for that, I change the attribute value to to 10 but the cursor doesn't move. But if I click on the cursor, the cursor moves but it's not really what I want because I just want to change the attribute value and see the move for the cursor.
Somebody have an idea to do this ?
I'm searching only a pure javascript solution because I'm using js_of_ocaml (http://ocsigen.org/js_of_ocaml/). I want to have a javascript to translante in js_of_ocaml.
Try this:
var b = document.getElementById("b");
var slider = document.getElementById("slider");
b.addEventListener("click", function() {
slider.value = 10;
})
Not sure if there is a better way, but here is a workaround in the mean time:
var b = document.getElementById("b");
var slider = document.getElementById("slider");
b.onclick = function() {
var container = slider.parentNode;
slider.remove();
container.innerHTML = '<input type="range" id="slider" min="0" max="14" value="12" />' + container.innerHTML
};