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
};
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>
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 am making a chrome extension which adds icons to certain URLs, so I would like to make a slider to adjust the size of the icon in the popup.html.
The HTML of the slider looks like this:
<div class="slidecontainer">
<input type="range" min="1" max="3" value="2" class="slider" id="myRange">
</div>
But for the slider to work, it needs some javascript code.
In the javascript file, I made a variable called size. I need the javascript to change the size variable according to the position of the slider.
var size = "/images/icon16.png";
var imageURL = "chrome-extension://" + chrome.i18n.getMessage("##extension_id") + size;
So I am thinking of a script that checks for myRange, and if it is 1, 2, or 3, it sets size to corresponding string:
"/images/icon16.png"
"/images/icon48.png"
"/images/icon128.png"
The catch is that I don't know how to implement this in my code, so any help or explanation would mean the world to me ...
You could save your strings in an array:
var myPaths = [
"/images/icon16.png",
"/images/icon48.png",
"/images/icon128.png"
]
And access your slider input like this:
var slider = document.getElementById("myRange");
so that slider.value will be the value of the input.
You could listen out for the change event on the slider, and then set your size variable accordingly.
Full code:
var myPaths = [
"/images/icon16.png",
"/images/icon48.png",
"/images/icon128.png"
];
var size = "/images/icon16.png";
var slider = document.getElementById("myRange");
slider.addEventListener("change", updateSize);
function updateSize() {
size = myPaths[slider.value - 1];
}
In short: document.getElementById("myRange").value;.
You can read more about sliders and getting the value of the slider here. If you want to get the value every time the slider is utilised:
document.getElementById("myRange").addEventListener("input", (evt) => {
console.log(evt.target.value);
})
Attach an onchange event listener to the input tag.
Declare enum as follows:
let enum = {
1: "/images/icon16.png",
2: "/images/icon48.png",
3: "/images/icon128.png"
}
Write something like this in the callback:
var size,
imageURL;
let enum = {
1: "/images/icon16.png",
2: "/images/icon48.png",
3: "/images/icon128.png"
}
let inputrange = document.querySelector('input[type=range]');
inputrange.addEventListner("change", function() {
size = enum[inputrange.value];
imageURL = `chrome-extension://${chrome.i18n.getMessage("##extension_id") + size}` ;
}) ;
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)
}
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">