We Keep Coding

Range Slider with direct number input

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.

Javascript/html : Two input range field balance scale

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">

How to pass value of an input range to a variable in JS?

How do you get the value of an input range slider into a variable? Below is the range I'm using. Suppose I drag the range to 12, then I need "12" as the variable that I want to then pass to a function.
<input type="range" min="1" max="30" value="15" />
Edit: I don't want a button to confirm the value or something, I want that everytime the value is changed, it gets passed to the function, so it'll be dynamic!
PS: It may not be the best question out there, but I've honestly tried looking for an answer before posting the question.

You just need to bind to the change event:
<input type="range" min="1" max="30" value="15" />
$("input").change(function(){
var value = $(this).val();
alert(value);
})

If you give an id to your field:
<input id="myRange" type="range" min="1" max="30" value="15" />
then:
$('#myRange').val();
First step it is not really required, but it makes things easier.
You can do this in every form field element:
$('selector').val();
And you will get its value.
UPDATE FOR YOUR QUESTION:
Use .change event to bind a function that make whatever you want to do with this value, for example:
$('#myRange').change(function(){
var myVar = $(this).val();
alert(myVar);
});

Just use register an event on the input:
<input type="range" min="1" max="30" value="15" oninput="alert(this.value)" />
you could of course also call a function in the oninput field.

jsfiddle
<input id="field" type="range" min="1" max="30" value="15" />
var input = document.getElementById('field');
console.info(input.defaultValue); // value default (15)
input.onchange = function () {
console.info(input.value); // value change
};

You can do this simply by adding a listener to the field's input event, updating your variable every time it fires.
var input=document.querySelector("input"),
value=input.value;
console.log(value);
input.addEventListener("input",function(){
value=this.value;
console.log(value);
},0);
<input max="30" min="1" type="range" value="15">

Give the input an Id. Then use
For JQuery
Var a = $('#whateverId').val();
For JavaScript
Var a = getElementById('whateverID).innerHtml;

Setting minimum number value input in input textbox

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">

How to create slider with decimal values using html

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");