I’m trying to figure out how to store JavaScript slider values as variables, to use later on for d3.js.
In the head of my html doc I have 6 sliders, each which displays 0-100 value.
I want to assign the slider values as variables – one variable for each slider. At each point in time, of course, each slider will only have one value.
But the idea is that I can change the slider position to change the slider value, and then hit an update button and then the newer slider values will become the new variable values.
I’ve tried a variety of different naming methods but none seems to be the right syntax.
What I am caught up on, is how to refer to the (slider) form by id or name or input id, which is html, when I create JavaScript variables for the values that are selected using the sliders.
Any ideas on how I can get this to work?
I searched online and could not readily find a solution on how to do this, or even a template to go off of. Any suggestions are welcome. Thanks!
Code is posted below (I took away my non-working attempts and replaced with hard coded values as an example for what slider positions could look like):
<p>
<form name = "weight1" id = "weight1" >
<text><b> weight1 </b></text> <input id="weight1" input type="range" name="weight1" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
<script type="text/javascript">
function get_nextsibling(n) {
x=n.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling; }
return x; }
function showValue(self) {
get_nextsibling(self).innerHTML=self.value; }
</script>
</form>
<form name = "weight2" id = "weight2" >
<text><b> weight2 </b></text> <input id="weight2" input type="range" name="weight2" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight3" id = "weight3" >
<text><b> weight3 </b></text> <input id="weight3" input type="range" name="weight3" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight4" id = "weight4" >
<text><b> weight4 </b></text> <input id="weight4" input type="range" name="weight4" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight5" id = "weight5" >
<text><b> weight5 </b></text> <input id="weight5" input type="range" name="weight5" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight6" id = "weight6" >
<text><b> weight6 </b></text> <input id="weight6" input type="range" name="weight6" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
</p>
<script type="text/javascript">
//put JavaScript function that makes each slider a variable, or just assign slider values directly to variables if easier...then use in body
var weightfactor1 = 0 ; //want this variable to be the form output value instead of hard coded values between 0-100 ...so weight1 slider
var weightfactor2 = 100 ; //want this variable to be weight2 slider value
var weightfactor3 = 10 ; //want this variable to be weight3 slider value
var weightfactor4 = 100 ; // " "" weight4
var weightfactor5 = 12 ; // " "" weight5
var weightfactor6 = 100 ; // " "" weight6
</script>
See: http://jsbin.com/ISekuSiN/5 for an example of the working sliders (solution that was provided to a prior question I had about this, Displaying values from multiple JavaScript slider values )
Couple of suggestions:
Make sure your html has been rendered before running your JavaScript
For the case above case you can use the document object as follows:
var weightFactor1 = document.getElementById("weight1").value;
Related
Hey I'm want to sync 2 inputs so if someone change the slider then should also change the number input and the other way round I know there are other answered Question but the did not work form me because it is important not to change any class names or ids only the number input sync with the slider but not also the other way round my code is:
<div class="slidecontainer">
<input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
<input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>
my js is
document
.querySelector(".slider")
.addEventListener("input", updateValue);
document
.getElementsByClassName("number")
.addEventListener("input", updateValue);
function updateValue(e) {
var sibling =
e.target.previousElementSibling ||
e.target.nextElementSibling;
sibling.value = e.target.value;
}
You can even shorten the whole thing to:
const inputs=[...document.querySelectorAll("input")];
inputs.forEach((inp,i)=>inp.addEventListener("input",()=>
inputs[1-i].value=inputs[i].value )
)
<div class="slidecontainer">
<input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
<input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>
let range=document.querySelector("input[type=range]");
let number=document.querySelector('input[type=number]')
range.addEventListener("change",(e)=>{
number.value=e.target.value;
})
number.addEventListener("change",(e)=>{
range.value=e.target.value;
})
For more goto: https://codepen.io/Gangster_sCode/pen/abNKJMm
I have a range in my html.....
Now my problem is that I want to print the value of the range back in my
html
This is the html for my range
<form oninput="amount.value=rangeInput.value">
<input type="range" id="rangeInput" name="rangeInput" min="0" max="100">
<output name="amount" for="rangeInput">0</output>
</form>
And i have a button to confirm the value
<div id="bevestig">
<h1>Bevestig</h1>
</div>
Has anyone an idea how to print the value of the range back in my html after you click on the h1?
You'll need to add some javascript to accomplish this.
document.getElementById("bevestig").addEventListener("click", function () {
var input = document.getElementById('rangeInput');
var output = document.getElementById('results');
output.innerHTML = input.value;
});
<form onchange="amount.value=rangeInput.value">
<input type="range" id="rangeInput" name="rangeInput" min="0" max="100" value="0" />
<output name="amount" for="rangeInput">0</output>
</form>
<div id="bevestig">
<h1>Bevestig</h1>
</div>
<p id="results"></p>
I have 6 sliders, each with a respective value from 0-100. I'd love to be able to show each slider percentage (against the total slider sum) to the right of each slider, but I am not sure how to do that.
I am able to grab the slider value to display above, as well as the slider values and sum of the values as JavaScript variables, but I'm not able to...
1) update the percentage values as the sliders are moved (I think I might need to write a separate function that does this, and then call it right after the slider values are displayed?) or
2) display the percentage values (which I rounded to a whole number effectively) just to the right after where the slider value is.
Can anyone clue me in on how to do this? It shouldn't be difficult from a technical standpoint but I have little experience in this arena. I am not using jquery either (as you can tell)... Thanks!
Code:
http://jsbin.com/owIjEXA/7/edit
<!-- Put divs here... trying to set up the display of percentages -->
<div id="val_weight1"></div>
<div id="val_weight2"></div>
<div id="val_weight3"></div>
<div id="val_weight4"></div>
<div id="val_weight5"></div>
<div id="val_weight6"></div>
<!-- form start -->
<form name = "form_weight1" id = "form_weight1" >
<text><b> First Weight </b></text>
<input id="weight1" input type="range" name="weight1" min="0" max="100" value="40" step="1" onchange="showValue(this); " />
<span id="range">40</span>
<text>/ PERCENTAGE%</text>
<script type="text/javascript">
<!-- Original JS bin that modified code: http://jsbin.com/ISekuSiN/5/edit -->
function get_nextsibling(n) {
x=n.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling; }
return x; }
function showValue(self) {
get_nextsibling(self).innerHTML=self.value; }
</script>
</form>
<form name = "form_weight2" id = "form_weight2" >
<text><b> Second Weight </b></text>
<input id="weight2" input type="range" name="weight2" min="0" max="100" value="10" step="1" onchange="showValue(this); " />
<span id="range">10</span>
<text>/ PERCENTAGE%</text>
</form>
<form name = "form_weight3" id = "form_weight3" >
<text><b> Third Weight</b></text>
<input id="weight3" input type="range" name="weight3" min="0" max="100" value="20" step="1" onchange="showValue(this); " />
<span id="range">20</span>
<text>/ PERCENTAGE%</text>
</form>
<form name = "form_weight4" id = "form_weight4" >
<text><b> Fourth Weight </b></text>
<input id="weight4" input type="range" name="weight4" min="0" max="100" value="5" step="1" onchange="showValue(this); " />
<span id="range">5</span>
<text>/ PERCENTAGE%</text>
</form>
<form name = "form_weight5" id = "form_weight5" >
<text><b> Fifth Weight </b></text>
<input id="weight5" input type="range" name="weight5" min="0" max="100" value="5" step="1" onchange="showValue(this); " />
<span id="range">5</span>
<text>/ PERCENTAGE%</text>
</form>
<form name = "form_weight6" id = "form_weight6" >
<text><b> Sixth Weight </b></text>
<input id="weight6" input type="range" name="weight6" min="0" max="100" value="20" step="1" onchange="showValue(this); " />
<span id="range">20</span>
<text>/ PERCENTAGE%</text>
</form>
<script type="text/javascript">
var weightfactor1 = parseInt(document.getElementById("weight1").value) ;
var weightfactor2 = parseInt(document.getElementById("weight2").value) ;
var weightfactor3 = parseInt(document.getElementById("weight3").value) ;
var weightfactor4 = parseInt(document.getElementById("weight4").value) ;
var weightfactor5 = parseInt(document.getElementById("weight5").value) ;
var weightfactor6 = parseInt(document.getElementById("weight6").value) ;
var weight_factor_sum = weightfactor1 + weightfactor2 + weightfactor3 + weightfactor4 + weightfactor5 + weightfactor6 ;
document.getElementById('val_weight1').innerHTML = (weightfactor1 / weight_factor_sum)*100;
document.getElementById('val_weight2').innerHTML = (weightfactor2 / weight_factor_sum)*100;
document.getElementById('val_weight3').innerHTML = (weightfactor3 / weight_factor_sum)*100;
document.getElementById('val_weight4').innerHTML = (weightfactor4 / weight_factor_sum)*100;
document.getElementById('val_weight5').innerHTML = (weightfactor5 / weight_factor_sum)*100;
document.getElementById('val_weight6').innerHTML = (weightfactor6 / weight_factor_sum)*100;
</script>
Try this as a starting point:
document.querySelector("#range").addEventListener("change", function(e){
document.querySelector(".range").textContent=e.currentTarget.value;
})
Here is the Fiddle to play with.
When dealing with several sliders, it doesn't make sense to add a change event for each of the sliders, instead use event-delegation (you attach the change-listener to the parent element containing all sliders and dispatch the event yourself).
Here is a Fiddle dealing with more sliders an a sum field.
I'm trying to figure out how to get multiple sliders to display their values to the right hand side, based on an example I found: http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/
(I then want to store each slider output as a JavaScript variable to use as an input to several functions, but first thing's first.)
I added an input id and name to each of the sliders (from http://html5tutorial.info/html5-range.php) as well as a form name and id (http://www.javascript-coder.com/javascript-form/getelementbyid-form.phtml) ... but I can't seem to modify the example function ( which uses document.getElementById("range").innerHTML ) to get the value to display for one of the sliders.
Thus, in their present state, all slider values reflect the 1st slider's position as opposed to the other ones. I've tried playing around with for a while, but have not made much progress beyond adding possible identifiers that I can't grab :-p.
Can anyone explain how I can target display slider values by their name or input id instead of input type? Or point me to a resource that could show me how to modify what I have now?
That way I could have each slider display a value for its own position.
I have the sliders in my header. Code is pasted below (I've left it so that the code runs, but each number displays the first slider's position):
<p>
<form name = "weight1" id = "weight1" >
<!-- http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/ -->
<text><b> weight1 </b></text> <input id="weight1" input type="range" name="weight1" min="0" max="100" value="0" step="1" onchange="showValue(weight1.value)" />
<span id="range">0</span>
<script type="text/javascript">
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>
</form>
<form name = "weight2" id = "weight2" >
<text><b> weight2 </b></text> <input id="weight2" input type="range" name="weight2" min="0" max="100" value="0" step="1" onchange="showValue(weight2.value)" />
<span id="range">0</span>
</form>
<form name = "weight3" id = "weight3" >
<text><b> weight3 </b></text> <input id="weight3" input type="range" name="weight3" min="0" max="100" value="0" step="1" onchange="showValue(this.value)" />
<span id="range">0</span>
</form>
<form name = "weight4" id = "weight4" >
<text><b> weight4 </b></text> <input id="weight4" input type="range" name="weight4" min="0" max="100" value="0" step="1" onchange="showValue(this.value)" />
<span id="range">0</span>
</form>
<form name = "weight5" id = "weight5" >
<text><b> weight5 </b></text> <input id="weight5" input type="range" name="weight5" min="0" max="100" value="0" step="1" onchange="showValue(this.value)" />
<span id="range">0</span>
</form>
<form name = "weight6" id = "weight6" >
<text><b> weight6 </b></text> <input id="weight6" input type="range" name="weight6" min="0" max="100" value="0" step="1" onchange="showValue(this.value)" />
<span id="range">0</span>
</form>
</p>
(note: I abandoned renaming the showValue(this.value) when I realized it didn't work as a unique identifier...)
Presumably, once I know how to grab a JavaScript slider value to display, I can use that same sort of technique to assign it to a variable to use it in the body of my HTML document...
Any insight would be much appreciated!
Id's have to be unique in a whole document. In this case range id is used in multiple span element. http://jsbin.com/ISekuSiN/5/
I have a html5 range input and a text box input. When the range changes, the text box will get updated. But what should I do so that when I put a number in the text box, the range input gets updated?
This is my current code:
<div>
<input id="slider" type="range" min="0" max="200" />
<input id="box" type="text" value="0"/>
</div>
<script>
var slider = document.getElementById('slider');
$('#box').change(function(){slider.value=parseInt(this.value)});
</script>
When I edit my text box, my slider (range input) does NOT change. What am I doing wrong? Can it be that I shouldn't be using slider.value to update the slider? If that is the reason, what is the correct way to do that?
Hey Everyone Those who don't know , we don't need any js or jquery for this
<form>
<div>
<input id="rangeInput" type="range" min="0" max="200" oninput="amount.value=rangeInput.value" />
<input id="amount" type="number" value="100" min="0" max="200" oninput="rangeInput.value=amount.value" />
</div>
</form>
It's a simple script, just do this:
<label for=range1>Slide, then press "Click to search slider value"</label>
<span>-1000 </span><input type="range" id="slide1" min="-1000" max="1000" value=0 step=0.25 onchange="printValue('slide1', 'rangeValue1')"><span> 1000 </span>
<i><input type=text id="rangeValue1" value=0 width=25% onchange="slideValue('slide1', 'rangeValue1');"><span> is the value of the slider now</span></i><br/><br/>
<script>
function printValue(sliderID, spanbox) {
var x = document.getElementById(spanbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
function slideValue(sliderID, spanbox){
var x = document.getElementById(spanbox);
var y = document.getElementById(sliderID);
y.value = parseInt(x.value);
}
window.onload = function() { printValue('slide1', 'rangeValue1'); }
</script>
(Of course, this only works when you press enter and submit the value to the "onchange")
in my side I did it in just Javascript and adding a onchange event.
I also added the value=0 to range so that make it start at the beguining.
<div>
<input id="slider" type="range" min="0" max="200" value="0"/>
<input id="box" type="text" value="0"/>
</div>
var slider = document.getElementById('slider');
var box = document.getElementById("box");
slider.onchange = function(){
box.value = slider.value;
}
And add this if you want to make it work on both side
box.onkeyup = function(){
slider.value = box.value;
}
This fiddle works:
var slider = document.getElementById('slider');
$('#box').change(function(){
slider.value=parseInt(this.value);
});
(So that's your current code, actually. Did you import the jQuery library?)
Keep in mind that you've set the slider's range to 200. Try some values between 0 and 200.
It's actually quite easy. It's all written in jQuery Tools API documentation. So I changed my code to this and it worked:
<div>
<input id="slider" type="range" min="0" max="200" />
<input id="box" type="text" value="0"/>
</div>
<script>
var sliderapi = $("#slider").data("rangeinput");
$('#box').change(function(){sliderapi.setValue(parseInt(this.value))});
</script>
$('#box').change(function(){
$('#slider').attr({"value":parseInt(this.value)});
});
Might work.