I am making a website where I want to use range slider(I know it only supports webkit browsers).
I have integrated it fully and works fine. But I would like to use a textbox to show the current slide value.
I mean if initially the slider is at value 5, so in text box it should show as 5, when I slide the value in text box should change.
Can I do this using only CSS or html. I want to avoid JQuery. Is it possible?
:before/:after, content and attr(), like this. However, the :before/:after pseudo-elements actually eat up some of the slider's range (although maybe that's fixable), and most importantly, the values aren't updated if the slider is manipulated. Nevertheless, I thought it would be interesting to leave this here. It might become possible in the future - waldyrious 2013-07-02 15:47
This uses javascript, not jquery directly. It might help get you started.
function updateTextInput(val) {
document.getElementById('textInput').value=val;
}<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">code
ejlepoud 2012-04-04 04:48
For those who are still searching for a solution without a separate javascript code. There is little easy solution without writing a javascript or jquery function:
<form name="registrationForm">
<input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="ageOutputId.value = ageInputId.value">
<output name="ageOutputName" id="ageOutputId">24</output>
</form>
If you want to show the value in text box, simply change output to input.
Update:
It is still Javascript written within your html, you can replace the bindings with below JS code:
document.registrationForm.ageInputId.oninput = function(){
document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
}
Either use element's Id or name, both are supported in morden browsers.
version with editable input:
<form>
<input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
<input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />
</form>
this.nextElementSibling or this.previousElementSibling and replace oninput with onchange to get a version that works outside of a form. http://jsfiddle.net/Xjxe6/94 - Jacque Goupil 2015-03-23 20:45
an even better way would be to catch the input event on the input itself rather than on the whole form (performance wise) :
<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
oninput="amount.value=rangeInput.value">
<output id="amount" name="amount" for="rangeInput">0</output>
Here's a fiddle (with the id added as per Ryan's comment).
id="amount" for the output, too - Ryan 2014-03-20 04:38
oninput="this.form.amount.value=this.value"d1Mm 2014-04-11 02:44
If you want your current value to be displayed beneath the slider and moving along with it, try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MySliderValue</title>
</head>
<body>
<h1>MySliderValue</h1>
<div style="position:relative; margin:auto; width:90%">
<span style="position:absolute; color:red; border:1px solid blue; min-width:100px;">
<span id="myValue"></span>
</span>
<input type="range" id="myRange" max="1000" min="0" style="width:80%">
</div>
<script type="text/javascript" charset="utf-8">
var myRange = document.querySelector('#myRange');
var myValue = document.querySelector('#myValue');
var myUnits = 'myUnits';
var off = myRange.offsetWidth / (parseInt(myRange.max) - parseInt(myRange.min));
var px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth / 2);
myValue.parentElement.style.left = px + 'px';
myValue.parentElement.style.top = myRange.offsetHeight + 'px';
myValue.innerHTML = myRange.value + ' ' + myUnits;
myRange.oninput =function(){
let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth / 2);
myValue.innerHTML = myRange.value + ' ' + myUnits;
myValue.parentElement.style.left = px + 'px';
};
</script>
</body>
</html>Note that this type of HTML input element has one hidden feature, such as you can move the slider with left/right/down/up arrow keys when the element has focus on it. The same with Home/End/PageDown/PageUp keys.
If you're using multiple slides, and you can use jQuery, you can do the follow to deal with multiple sliders easily:
function updateRangeInput(elem) {
$(elem).next().val($(elem).val());
}input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; }
input[type=text] { width: 100px; }
input[type=range] { width: 400px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0">
<input type="text" value="0">
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50">
<input type="text" value="50">Also, by using oninput on the <input type='range'> you'll receive events while dragging the range.
<form name="registrationForm">
<input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
<input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>if you still looking for the answer you can use input type="number" in place of type="range" min max work if it set in that order:
1-name
2-maxlength
3-size
4-min
5-max
just copy it
<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />