Is it possible to utilise a range slider in a form field and also allow a user to input the value through typing a number, i.e. having input type="range" and input type="number" on the same form field with the one utilised overriding the other?
Ok, so in response to the below here is my code:
<label for="monday">Monday Sales Target - $<span id="monday"></span></label>
<input type="range" min="0" max="5000" id="monday" name="monday" value="0" step="50" oninput="showValue1(this.value)" />
JavaScript:
function showValue1(newValue) {
document.getElementById("monday").innerHTML=newValue;
}
At the moment the range slider changes and outputs the number selected at the end of the label however some users are complaining that the slider is too fiddly and would like to enter the number directly through a number input. Is this possible?
You can make the range value change according to the input value using onkeyup event with the input, here's what you will need:
HTML:
JS:
function changeRangeValue(val){
document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
showValue1(val);
}
Demo:
function showValue1(newValue) {
document.getElementById("monday").innerHTML= newValue;
}
function changeRangeValue(val){
document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
showValue1(val);
}
function changeInputValue(val){
document.getElementById("number").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
showValue1(val);
}
<input type="number" id="number" min="0" max="5000" onkeyup="changeRangeValue(this.value)"/>
<br />
<label for="monday">Monday Sales Target - $<span id="monday"></span></label>
<input type="range" min="0" max="5000" id="range" name="monday" value="0" step="50" oninput="changeInputValue(this.value)" />
Note:
You can't set the same id for multiple elements in HTML.
Related
How do I make these two input range fields balance to maximum 100, that when I move the first input field range the second should be adjusting too, vice versa. I mean that it should be proportional both sides like balance scale.
Here is my code https://jsfiddle.net/jsm4s2oz/1/
//First input range
<output name="judge_rangeOutput" id="judge_rangeOutput">75</output>
<input type="range" name="judge_range" id="judge_range" min="0" max="100" value="75" oninput="judge_rangeOutput.value = judge_range.value"><br/>
//Second input range
<output name="preJudge_rangeOutput" id="preJudge_rangeOutput">25</output>
<input type="range" name="prejudges_range" id="prejudges_range" min="0" max="100" value="25" oninput="preJudge_rangeOutput.value = prejudges_range.value ">
In your input handler, in addition to changing the <output> field for the same slider, also change the value of the other slider and the other <output> to 100 - this.value.
$("#judge_range").on("input", function() {
$("#judge_rangeOutput").val(this.value);
$("#prejudges_range").val(100 - this.value);
$("#preJudge_rangeOutput").val(100 - this.value);
});
$("#prejudges_range").on("input", function() {
$("#preJudge_rangeOutput").val(this.value);
$("#judge_range").val(100 - this.value);
$("#judge_rangeOutput").val(100 - this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
First input range
<output name="judge_rangeOutput" id="judge_rangeOutput">75</output>
<input type="range" name="judge_range" id="judge_range" min="0" max="100" value="75">
<br/>Second input range
<output name="preJudge_rangeOutput" id="preJudge_rangeOutput">25</output>
<input type="range" name="prejudges_range" id="prejudges_range" min="0" max="100" value="25">
I am trying to set the "max" setting in a number input field. I have successfully set the default value to my variable available_seats using:
<input type="number" min="" max="" step="1" name="available_seats" id="available_seats"/>
and
$('input[name="available_seats"]').val(response.available_seats);
However, I am having a lot of trouble setting the min and max settings. Here's what I've tried;
$('#available_seats').spinner('option', 'max', data.available_seats);
That doesn't work. Any ideas?
The input has attributes so set the attributes.
$("#available_seats")
.attr("min", 10)
.attr("max", 20)
.val(15);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" min="" max="" step="1" name="available_seats" id="available_seats"/>
I'm trying to make the minimum allowed input amount to be 1.00 and not to allow 0.99 or anything less than 1.00
<input type="text" onkeyup="switchSlider(this.value, 1)" value="25.00" class="master-amount" name="master-amount" id="master-amount">
User HTML min Attribute
<input type="number" min="1.00" onkeyup="switchSlider(this.value, 1)" value="25.00" class="master-amount" name="master-amount" id="master-amount">
Here is an example for you
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_max_min
Update:
You can test the value on keyup as per code below and force 1 as the min value.
<input type="number" onkeyup="switchSlider(this)" value="25.00" class="master-amount" name="master-amount" id="master-amount">
switchSlider = function (e){
if (!e.value || e.value < 1) e.value=1;
}
http://jsfiddle.net/2dq06qpc/
You can do this right in your markup using the min max and step attributes, note you need to use type="number"
<input type="number" min="0" max="100" step="5">
In your code:
<input min="1" type="number" onkeyup="switchSlider(this.value, 1)" value="25.00" class="master-amount" name="master-amount" id="master-amount">
I want to create a slider showing decimal values like 0.0 to 0.1 using html or html5.
Add step="0.1" in your input range tag like this: <input type="range" min="0.1" max="1.0" step="0.1" value="1"> Example:
document.getElementById("scale").oninput = function() {
document.getElementById("spanscale").innerHTML = this.value;
}
<input type="range" min="0.1" max="3.0" step="0.1" value="1" id="scale">Scale:<text id="spanscale" style="inline">1</text>
If you want to show a decimal place in integer numbers you can add this piece of code in the value output: Number(this.value).toFixed(1)
document.getElementById("scale").oninput = function() {
document.getElementById("spanscale").innerHTML = Number(this.value).toFixed(1);
}
<input type="range" min="0.1" max="3.0" step="0.1" value="1.0" id="scale">Scale:<text id="spanscale" style="inline">1.0</text>
It sounds like you want an input field that the user can click arrows to increment/decrement a value in steps of 0.1. If that's the case, you want to use an HTML5 numeric input element:
<input type="number" min="0" max="1" step="0.1" value="0.5" />
Find out more here at HTML5 Goodies.
As you precise HTML5, then you can use the new input type range :
<input type="range" name="things" min="1" max="10">
Demonstration
Be aware that it doesn't work on IE9-,though.
For setting this dynamically using JavaScript:
document.getElementById("my_slider").setAttribute("step", "0.1");
I'm trying to store numbers into local storage for a type website with a type of shopping cart... I found examples where storing text/email works but when I try to store as numbers instead of text or change the form names it doesn't seem to work.
This is my form I made on the site to capture the data, followed by the javascript that should fill in saved data from another session, capture data, and (currently reset on submit) data.
<form id="localStorageCart" method="post" action="">
<label>Rooster:</label>
<input type="number" name="roosterQ" id="roosterQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<label>Cow:</label>
<input type="number" name="cowQ" id="cowQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<label>Cat:</label>
<input type="number" name="catQ" id="catQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<label>Sheep:</label>
<input type="number" name="sheepQ" id="sheepQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<label>Dumpster:</label>
<input type="number" name="dumpsterQ" id="dumpsterQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<label>Dog:</label>
<input type="number" name="dogQ" id="dogQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<label>Horse:</label>
<input type="number" name="horseQ" id="horseQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<input type="submit" class="submitOrder" value="Submit" />
</form><br>
<br>
<script type="text/javascript">
$(document).ready(function () {
function init() { /* checks for stored data and fills in... */
if (localStorage["roosterQ"]) {
$('#roosterQ').val(localStorage["roosterQ"]);
}
if (localStorage["cowQ"]) {
$('#cowQ').val(localStorage["cowQ"]);
}
if (localStorage["catQ"]) {
$('#catQ').val(localStorage["catQ"]);
}
if (localStorage["sheepQ"]) {
$('#sheepQ').val(localStorage["sheepQ"]);
}
if (localStorage["dumpsterQ"]) {
$('#dumpsterQ').val(localStorage["dumpsterQ"]);
}
if (localStorage["dogQ"]) {
$('#dogQ').val(localStorage["dogQ"]);
}
if (localStorage["horseQ"]) {
$('#horseQ').val(localStorage["horseQ"]);
}
}
init();
});
$('.stored').keyup(function () { /* keyup runs when key is pressed in a form with "stored"... Write to LS */
localStorage[$(this).attr('name')] = $(this).val();
});
$('#localStorageCart').submit(function() { /* currently resets all LS data*/
localStorage.clear();
});
</script>
localStorage can only hold strings, therefore if you want to store numbers you need to type convert
var num = 1.5, str;
// Number to string, would be done implicitly by localStorage
str = num.toString();
// String to number
num = +str; // note nothing infront of the + sign.
// OR
// num = window.parseFloat(str,10); // or parseInt if you want integers
console.log(num, str);
// 1.5 "1.5"
or change the form names it doesn't seem to work
Are you updating your init, too? To avoid having to do this in the future, it should loop over .stored rather than get each individually by id.
If you still want to do it via localstorage, you might want to check json.stringify before storing the variables
var obj = { 'a': 1, 'b': 2, 'c': 3 };
localStorage.setItem('obj', JSON.stringify(obj));
What do you intent to do anyway? are you just trying to retain the field for next use or reload of page?
if so, you might want to try this plugin, Sisyphus
http://simsalabim.github.com/sisyphus/