input type=range滑动事件

Posted 2020-09-07 马习习

<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 })