实时监听type="range"的滑块事件

最新推荐文章于 2020-02-04 19:16:50 发布

weixin_34150503

最新推荐文章于 2020-02-04 19:16:50 发布

阅读量3.9k

点赞数 1

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/879103/blog/787489

版权

2019独角兽企业重金招聘Python工程师标准>>>

首先会想到onchange事件，但是onchange事件只在松开鼠标的瞬间触发，要想实时监听，还需要用到oninput事件，而IE10并不支持oninput事件，为了做到兼容，最好同时监听range的change和input事件：

<input type="range" oninput="getVal(this.value)" onchange="getVal(this.value)">

转载于:https://my.oschina.net/u/879103/blog/787489

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34150503

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
实时监听type="range"的滑块事件

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫

input type=range滑动事件

anxuandao0076的博客

03-29

1830

<input type="range"/>需求：滑动时，计数$.fn.RangeSlider = function(cfg) { this.sliderCfg = { min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null, max: cfg && !isN...

html range样式修改,自定义(滑动条)input[type="range"]样式

weixin_39551554的博客

06-04

1814

这是我的第一篇博文，也是我这个小白努力的起点。刚接触JavaScript没多久，如果文中有错误的地方欢迎大家指正，或者给予建议，让我能逐渐向大牛靠拢。今天这篇文章给大家带来的是关于美化Slider Bar的相关内容。Range是HTML5中新出现的滑块控件，也是常见的控件的之一，不过这个控件的原始样式略丑，所以想对它进行一些改造。需要注意的是Internet Explorer 9及更早IE版本并不...

参与评论您还未登录，请先登录后发表或查看评论

原生js input[type=range] 监听值变化

weixin_42448623的博客

09-24

3852

<input id="density" type="range" oninput="densityInput(event)" onpropertychange="OnPropChanged(event)"> //js function OnInput (event) { console.log(event.target.value); } // Internet...

HTML5 input类型 range滑动条介绍与使用

微笑丶1998的博客

04-06

9773

简介 range滑动条是HTML5新增的input类型，用于简单的滑动。使用示例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Range滑动条使用</title> <script type="text/javascript...

CSS实现自定义滑动条(input)，动态监听改变数值

眺望远方

06-03

1747

有时候我们需要一个滑杆滑动，可以移动的同时，还能够获取到从小到大的数值，如图：向后滑动值越大，能够做到实时监听。我的可能不是最优解决方案，仅供大家参考！代码如下：这是建立一个input元素，最小值为0，最大值为100，每次加1，默认值为10. 样式如下： input[type=“range”] { display: block; -webkit-appearance: none; bac...

jQuery监听input:range的滑块移动，实现实时反馈

Valdis的魔法商店

02-04

2548

使用change()并不能实现此效果，因为必须鼠标松开时才会触发，而当鼠标移动时并不会触发： // 这样是不行的 $("#slider").change(() => { console.log("changed!"); }); 应该这样写： $("#slider").on('input propertychange', () => { console.log(...

自定义(滑动条)input[type="range"]样式下载

01-21

在`script.js`文件中，监听滑动条的`input`事件，并更新滑动条附近的文本或其他元素： ```javascript document.getElementById('customRange').addEventListener('input', function() { var value = this.value; ...

JavaScript实战(原生range和自定义特效)简单实例

11-28

本实例中，我们将探讨如何利用原生`<input type="range">`滑块控件以及完全自定义的滑动效果来实现动态显示和美观的设计。首先，原生`<input type="range">`控件在HTML5中被引入，它提供了一种简单的用户界面，...

jQuery和CSS3斑马线样式range滑块特效

12-11

**jQuery和CSS3斑马线样式range滑块特效详解** 在网页设计中，交互元素的美观性和用户体验至关重要。其中，`range`滑块作为一种常见的表单控件，用于选择一个连续或近似连续的值，它能提供直观的拖动操作。本教程将...

day44-Custom Range Slider（自定义范围滑块）

热门推荐

清风的博客

06-02

13万+

input range滑动条样式自定义

IT小小酥的博客

08-04

2374

input[type="range"]的样式在谷歌，火狐，IE下的样式各不相同，而实际往往需要固定的样式，这里做了三个浏览器下样式处理，IE只支持9+。上面是效果图。首先清除浏览器默认的range样式。 input[type=range]{ width: 556px; height: 17px; ...

Html 5 Input type=range 滑动条

蚩尤后裔-汪茂雄

03-25

6143

目录 Input type=range 概述单个滑动条编码示例多个滑动条编码示例修改滑动条默认样式 Input type=range 概述 1、HTML5 拥有多个新的表单输入类型，这些新特性提供了更好的输入控制和验证，range 就是其中一个。 2、range 类型用于应该包含一定范围内数字值的输入域，可以设定对所接受的数字进行限定：属性值描述 max...

HTML5表单之Input 类型-range

乱七八糟的

03-29

3506

range类型用于应该包含一定范围内数字值的输入域。 range类型显示为滑动条。我还可以设定对所接受的数字的限定： eg：和number很像！ xxxx 还是opera效果好！属性值描述 max number 规定允许的最大值 min number

input的type属性

weixin_43748812的博客

11-24

3785

1.input的type 属性的新增值 1.概述 eamil 用于应该包含“e-mail"地址的输入框 url 用于应该包含“URL"地址的输入框 search 用于应该“搜索内容"的输入框 number 用于应该包含“数值"的输入控件 tel 规定显示的类型为“电话号码"的输入框 range 规定显示的类型为“数值选择范围"选择控件 color规定显示的类型为“颜色"选择控件日期相关 1....

<input type="range">标签用法实例代码

weixin_33670786的博客

03-01

254

在HTML5中，又新增许多新<input>控件类型，比较实用的一个就是<input type="range">，以滑竿的方式来调整value值，在这以前需要通过模拟才能够实现，下面就通过代码实例介绍一下它的作用。代码如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 ...

Input的类型(type)

afvdxhq267883的博客

07-12

253

HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。本章全面介绍这些新的输入类型： color date datetime datetime-local email month number range search tel time url week 注意:并不是所有的主流浏览器都支持...

range滑块自定义样式，步骤详解以及实际应用

weixin_33675507的博客

04-16

1467

写在前面：本文的主要内容包括：type="range"属性介绍，修改range默认css样式以及在js中的实际应用。本文面向前端小白，写的不好之处，请多多见谅。文末有demo链接，可以自行复制到本地进行试验。相关：自定义 range radio select的样式滑轮，按钮，选择框最终要实现的效果：其中包括一部分js代码步骤： 1.range属性相关介绍 2.搭建html结构； 3.cs...

使用vue2修改下述代码，让el-slider滑块控制el-date-picker的时间，滑块的初始最大最小值为el-date-picker的初始值，随着滑块滑动el-date-picker的值会改变 <div> <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> <el-slider range style="padding:0 12px;" @change="onChange"></el-slider> </div>

06-01

可以使用Vue的计算属性和watch来实现这个功能。具体实现如下： ``` <template> <div> <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker> <el-slider range style="padding:0 12px;" :min="minTime" :max="maxTime" v-model="sliderValue" ></el-slider> </div> </template> <script> export default { data() { return { dateRange: [], // 日期范围 sliderValue: [], // 滑块的值 }; }, computed: { minTime() { // 计算最小时间 return this.dateRange[0] ? this.dateRange[0].getTime() : 0; }, maxTime() { // 计算最大时间 return this.dateRange[1] ? this.dateRange[1].getTime() : new Date().getTime(); }, }, watch: { sliderValue(val) { // 监听滑块的值变化，修改日期范围 this.dateRange = [new Date(val[0]), new Date(val[1])]; }, dateRange(val) { // 监听日期范围变化，修改滑块的值 this.sliderValue = [val[0].getTime(), val[1].getTime()]; }, }, }; </script> ``` 在这个代码中，我们首先使用了一个计算属性来计算滑块的最小值和最大值。然后使用了一个watch来监听滑块和日期范围的变化，并根据变化来修改另一个的值。最终实现了滑块控制日期范围的功能。