input type=range滑动事件

<input type="range"/>需求:滑动时,计数$.fn.RangeSlider = function(cfg) {  this.sliderCfg = {    min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,    max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,    step: cfg && Number(cfg.step) ? cfg.step : 1,    callback: cfg && cfg.callback ? cfg.callback : null  }
  var $input = $(this)  var min = this.sliderCfg.min  var max = this.sliderCfg.max  var step = this.sliderCfg.step  var callback = this.sliderCfg.callback  $input.attr(‘min‘, min)    .attr(‘max‘, max)    .attr(‘step‘, step)

$input.bind(‘input‘, function(e) {    $input.attr(‘value‘, this.value)    $input.css(‘background-size‘, this.value + ‘% 100%‘)    if ($.isFunction(callback)) {      callback(this)    }  })}var change = function($input) {  var Value = $(‘input‘).attr(‘value‘) * 5  var Price = Value + 200  var Price1 = Value + 150  var Price2 = Value + 100  $(‘.proportion‘).text(Value + ‘%‘)  $(‘.profit‘).text(‘¥‘ + Value)  $(‘.price‘).text(‘¥‘ + Price)  $(‘.price1‘).text(‘¥‘ + Price1)  $(‘.price2‘).text(‘¥‘ + Price2)}$(‘input‘).RangeSlider({ min: 0, max: 100, step: 1, callback: change })
时间: 2024-11-05 17:30:09

input type=range滑动事件的相关文章

美化input type=range标签滑动样式(带渐变效果)

input原来的样式就不在此赘述了: 下面看一下实际项目中用到的input输入框,同步绑定输入数据,实现输入框双向绑定(实际项目中使用的是vue框架): html部分: <div class="inputRatio"> 滑动条:<input type="range" name="ratio" :value="parseInt(ratio)" @input="ratio=$event.target.v

&lt;input type=&quot;file&quot;&gt; change事件异常处理办法

问题:最近发现一个奇怪的bug, 那就是在上传图片需要采用input type=file来进行文件选择.由于为了适应美工的UI图,所以是把选择文件的input框隐藏了.然后通过另外一个按钮的点击事件来触发input的选择事件.代码如下: <div style="width:120px;height:120px"> <img src="/image/uploadfile.png" style="width:100%;height:100%&

input Type=range 设定默认值

<input id="goOrBack" max="1940" min="1032" type="range"> max:为最大值 min:最小值 $(document).ready(function() { $('#goOrBack').val(1500);//设定默认值 }) 原文地址:https://www.cnblogs.com/agen-su/p/11806058.html

&lt;input type="range"&gt;标签用法实例代码

<input type="range">标签用法实例代码: 在HTML5中,又新增许多新<input>控件类型,比较实用的一个就是<input type="range">,以滑竿的方式来调整value值,在这以前需要通过模拟才能够实现,下面就通过代码实例介绍一下它的作用. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf

input type属性

在HTML5中,规定的 input type 属性值如下: 1.button 定义可点击按钮 2.checkbox   复选框 <form action="demo-form.php"> <input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br> <input type="checkbox" n

html5与js关于input[type=&#39;text&#39;]文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick=&quot;select();&quot;。做购物车页面时会要用到。

关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="select();".做购物车页面时会要用到. input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange: 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次

手机QQ浏览器和微信内置webview对input type="file" 的change事件不灵

做一个H5页面,选中图片后上传,遇到手机QQ浏览器时   不能及时识别change事件,真是日了狗了,下面是针对这一现象的解决办法,不用change事件: <!DOCTYPE> <html>     <head>         <title></title>         <meta charset="utf-8"/>         <meta Content-Type="applicatio

INPUT[type=file]的change事件不触发问题

在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已.对于文字没改变的选择,change事件则不会触发. 当INPUT[type=file]控件上已经选择过一次文件之后,再次点击它选择同一个文件时change事件就不会触发.因为第二次选择后里面的文字和第一次是一样的,没有改变.还有个更蛋疼情况是有些浏览器会自动记住控件上的文字,即使页面关闭后重新打开还

vue监听滑动事件,隐藏移动端键盘或者input失去焦点

在页面加载的地方mounted或者created写监听事件,注意使用touchmove事件 window.addEventListener("touchmove",this.myTouchMove) // 监听滑动事件 // 滑动关闭键盘 myTouchMove: function (evt) { if(document.hasFocus){ const inputId = document.getElementById('myBox') // 获取ID inputId.blur()