HTML5 输入类型范围显示范围值 [英] HTML5 input type range show range value

问题描述

我正在制作一个我想使用范围滑块的网站(我知道它只支持 webkit 浏览器).

I am making a website where I want to use range slider(I know it only supports webkit browsers).

我已经完全集成它并且工作正常.但我想使用 textbox 来显示当前幻灯片值.

I have integrated it fully and works fine. But I would like to use a textbox to show the current slide value.

我的意思是，如果最初滑块的值为 5，那么在文本框中它应该显示为 5，当我滑动文本框中的值时应该会改变.

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.

我可以只使用 CSS 或 html 来做到这一点吗?我想避免 JQuery.有可能吗?

Can I do this using only CSS or html. I want to avoid JQuery. Is it possible?

推荐答案

这里使用的是javascript，而不是直接使用jquery.它可能会帮助您入门.

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

这篇关于HTML5 输入类型范围显示范围值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！