如何通过输入值更改slider的值(代码片段)

关键词：

function myFunction() 
  var slider = document.getElementById("myRange").value;
  document.getElementById("myRangeValue").value = "Rs: " + slider;

<div class="wrapper Slider">
  <input type="range" min="0" max="10000000" value="20000" name="myRange" id="myRange" onchange="myFunction()" style="margin-top: 10px;">
</div>

<div class="wrapper SliderValue">
  <input type="text" name="myRangeValue" value="Rs.0" id="myRangeValue" style="height:50px;text-align: center;font-size: 25px;">
</div>

给出滑块输入：

<div class="wrapper Slider">
    <input type="range" min="0" max="10000000" value="20000" class="slider " name="myRange" id="myRange" style="margin-top: 10px;">
</div>
<div class="wrapper SliderValue">  
    <input type="text" class="personal" name="myRangeValue" value="Rs.0"  id="myRangeValue" style="height:50px;text-align: center;font-size: 25px;">
</div>    

您可以在myRangeValue inout框中点击返回后使用以下javascript进行更新。

    document.getElementById('myRange').addEventListener('change', (evt) => 
        document.getElementById('myRangeValue').value = document.getElementById('myRange').value;
    );

    document.getElementById('myRange').addEventListener('mousemove', (evt) => 
        document.getElementById('myRangeValue').value = document.getElementById('myRange').value;
    );

    document.getElementById('myRangeValue').addEventListener("keyup", function (event) 
        if (event.keyCode !== undefined)  // Handle the event with KeyboardEvent.keyCode
            switch(event.keyCode) 
                case 13: // return key
                    event.preventDefault();
                    document.getElementById('myRange').value = document.getElementById('myRangeValue').value;
                    break;
                default:
                    // console.log('event.keyCode: ' + event.keyCode)
            
        ;
    );

这是一个jsfiddle，它演示了Change slider value上面的代码

JQuery Slider - 如何更改滑块输入值的变化

】JQuerySlider-如何更改滑块输入值的变化【英文标题】：JQuerySlider-Howtoalsochangethesliderinputvaluechange【发布时间】：2018-12-0322:47:10【问题描述】：除了在更改滑块时更改输入值之外...我如何反之亦然在输入更改时更改滑块？html:<div... 查看详情

如何通过ajax更改多个下拉值？(代码片段)

我创建了4个书籍级别的下拉列表，每个级别依赖于其上级（例如，书籍级别2显示下拉值取决于书籍级别1类别等等）并且它也正常工作，但现在我只想要BookLevel4独立，如果BookLevel1不为空，则应显示值。即，onchangeBooklevel1，BookLev... 查看详情

Jquery UI Slider在输入字段中更改时更改滑块的值

】JqueryUISlider在输入字段中更改时更改滑块的值【英文标题】：JqueryUISliderchangevalueofsliderwhenchangedininputfield【发布时间】：2012-10-0907:53:19【问题描述】：$("#storlekslider").slider(range:"max",min:0,max:1500,value:0,slide:function(event,ui)$("#storl 查看详情

slider(代码片段)

...lue,//当前滑块定位到的值onChanged:(val)//滑动监听setState(()//通过setState设置当前值_sliderValue=val;);,onChangeStart:(val)//开始滑动时的监听print(‘changeStart:val=$val‘);,onChangeEnd:(val)//滑动结束时的监听print(‘changeEnd:val=$val‘);,min:0,//最小值max... 查看详情

vue中如何实时修改输入的值(代码片段)

vue中如何实时修改输入的值经常看到需要对用户输入的值进行实时修改，有时是需要修改为指定的展示内容，有时候是用来校验，禁止用户输入非法数据，总之是一个常见的需求吧，只是自己一直没有特意去关注。思来想去还是... 查看详情

如何通过 Carousel 中的 Javascript 代码更改背景图像？

】如何通过Carousel中的Javascript代码更改背景图像？【英文标题】：HowcanIchangebackgroundimageviaJavascriptcodeinCarousel?【发布时间】：2021-08-0615:00:14【问题描述】：我有一个Slider对象，其中包含图像的SliderImageUrl。这是我的c#代码，用于在... 查看详情

如何更改输入反应本机的值

】如何更改输入反应本机的值【英文标题】：Howtochangevalueofinputreactnative【发布时间】：2019-03-1203:18:59【问题描述】：抱歉，我是ReactNative新手，想知道如何更改当前输入值？在我的情况下，如果我直接输入一个新词，输入前一个... 查看详情

如何通过它们的值更改 PHP 中选择元素中页面的位置？

】如何通过它们的值更改PHP中选择元素中页面的位置？【英文标题】：HowcouldichangethelocationofthepageinaselectelmentinPHPbytheirvalues?【发布时间】：2020-03-2412:02:15【问题描述】：我有一个Select元素，其中包含我从数据库中查询的一些选项... 查看详情

如何使 XAML Slider 元素仅吸附到允许的值？

】如何使XAMLSlider元素仅吸附到允许的值？【英文标题】：HowcanImakeaXAMLSliderelementsnaptoallowedvaluesonly?【发布时间】：2010-11-0314:16:49【问题描述】：我有一个最小值0和最大值1的滑块。当我当前滑动它时，该值被设置为0到1之间的十... 查看详情

将 Slider 小部件中的值传递到 firestore 数据库

...数据库的函数中。我有一个设置为零的值列表，目标是在更改滑块的值时更改值。这是函数的sn-p：import\'package:clo 查看详情

通过比较两个输入字段中的值来启用/禁用元素(代码片段)

我有两个输入字段值，我想知道如果第一个输入值大于第二个输入值，我怎么能禁用一个按钮。它仅使用第一个字母，但超过2个数字不起作用。<buttontype="submit"data-bind="click:addition,enable:temp1()>temp2()">Clickhereforaddition</button... 查看详情

我希望我的jqueryui范围滑块根据输入值动态移动(代码片段)

hereistherangeslider基本上我想在我更改输入内部的数字时移动滑块。HTML代码：<inputid="txtMinPrice"type="text"placeholder="dela"><inputid="txtMaxPrice"type="text"placeholder="panala"><divid="price__range"></div>jQuery代码：`varsliderElement=$('#price_... 查看详情

html输入类型编号-如何知道“步骤”功能触发更改事件？(代码片段)

...键或用户在输入字段中输入值来触发“onChange”事件。我如何区分这两者？<inputtype="number"min="0"max="100"step="0.005"/>答案<htmllang="en"> 查看详情

如何更改指针变量的值并将更改保留在函数之外而无需通过引用传递？

】如何更改指针变量的值并将更改保留在函数之外而无需通过引用传递？【英文标题】：HowdoIchangeapointervariable\'svalueandkeepthechangesoutsideofafunctionwithoutpass-by-reference?【发布时间】：2019-02-1108:21:40【问题描述】：我正在为一个编写C... 查看详情

如何使用按钮更改 UI Slider 的物理位置

】如何使用按钮更改UISlider的物理位置【英文标题】：HowtochangeUISlider\'sphysicallocationusingbutton【发布时间】：2016-10-1321:17:03【问题描述】：我正在尝试通过按下“POSITIONSLIDERTOZERO”按钮来更改jquery滑块的位置。这会将新的位置变量... 查看详情

vueset(代码片段)

Vue可以通过数组变异的方法可以控制数组的增减，却不能更改数组及对象，vue可以通过set方法改变数组的长度，改变某项的值，在组件中可以使用$set方法改变数组长度和某项的值调用方法：Vue.set(target,key,value)target：要更改的数... 查看详情

如何使用javascript通过类名更改html元素的值

】如何使用javascript通过类名更改html元素的值【英文标题】：howtochangevalueofhtmlelementbyclassnameusingjavascript【发布时间】：2015-03-1104:37:26【问题描述】：这是我用来更改html元素值的代码***<aclass="classname"href="Vtech.com">Thistexttobechnag... 查看详情

如何更改输入值？

】如何更改输入值？【英文标题】：Howtochangevalueofinput?【发布时间】：2018-04-1503:15:52【问题描述】：我正在对网站进行自动化测试，但在更新输入值时遇到了问题。如果我更改了值，我尝试更新的值似乎没有在活动DOM中更新，这... 查看详情