HTML5 input type range show range value

后端未结

关注

 12  1295

野趣味

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

相关标签:

12条回答

情书的邮戳

2020-11-28 02:22
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" />
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

醉话见心

2020-11-28 02:23

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.

0 讨论(0)

忘了有多久

2020-11-28 02:23

Try This :

 <input min="0" max="100" id="when_change_range" type="range">
 <input type="text" id="text_for_show_range">

and in jQuery section :

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });

0 讨论(0)

陌清茗

2020-11-28 02:27
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:
```
<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>
```
JsFiddle Demo

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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

天涯浪人

2020-11-28 02:31

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

0 讨论(0)

眼角桃花

2020-11-28 02:32

For people don't care about jquery use, here is a short way without using any id

<label> userAvatar :
  <input type="range" name="userAvatar" min="1" max="100" value="1"
         onchange="$('~ output', this).val(value)" 
         oninput="$('~ output', this).val(value)">
  <output>1</output>
</label>

0 讨论(0)

上一页 1 2