范围滑块

下载代码

html

css

分享到微信朋友圈

html

css

.range {
  position: relative;
}
.range input[type=range] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  width: 100%;
  height: 22px;
  cursor: pointer;
  display: block;
}
.range input[type=range]:focus {
  outline: none;
}
.range input[type=range][disabled] {
  opacity: .3;
  cursor: default;
}
.range .rangeslider {
  position: relative;
  height: 22px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.range .rangeslider:before {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.range input::-webkit-slider-runnable-track {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
  margin: 11px 0;
}
.range input::-moz-range-track {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
  margin: 11px 0;
}
.range input::-ms-track {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
  color: transparent;
  padding: 11px 0;
  background: transparent;
  border-color: transparent;
}
.range input::-ms-fill-lower,
.range input::-ms-fill-upper {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
}
.range input::-ms-fill-lower {
  background: #60cd18;
}
.range .rangeslider-fill-lower {
  background-color: #60cd18;
  border-radius: 100px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 4px;
  will-change: width;
}
.range input::-webkit-slider-thumb {
  box-sizing: border-box;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
  border: 6px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 100px;
  background: #333940;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin-top: 2px;
}
.range input::-moz-range-thumb {
  box-sizing: border-box;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
  border: 6px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 100px;
  background: #333940;
  cursor: pointer;
}
.range input::-ms-thumb {
  box-sizing: border-box;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
  border: 6px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 100px;
  background: #333940;
  cursor: pointer;
}
.range .rangeslider-thumb {
  box-sizing: border-box;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
  border: 6px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 100px;
  background: #333940;
  cursor: pointer;
  position: absolute;
  -ms-touch-action: pan-x;
      touch-action: pan-x;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  will-change: left;
}
.range .range-output {
  position: absolute;
  left: 6px;
  top: 6px;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.range .range-output .output {
  display: block;
  position: absolute;
  height: 60px;
  line-height: 60px;
  min-width: 32px;
  padding: 0 20px;
  top: -26px;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  background: #383c42;
  color: #fff;
  border-radius: 100px;
  white-space: nowrap;
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
}
.range .range-output .output:before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  border: 10px solid #383c42;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

body {
  font-family: Helvetica Neue, Helvetica, Arial;
  font-weight: 300;
}

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #333;
}

form {
  max-width: 500px;
  min-width: 320px;
}

h2 {
  font-weight: 300;
  text-align: center;
  margin-bottom: 30px;
}

JavaScript

'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var END = 'change';
var START = 'ontouchstart' in document ? 'touchstart' : 'mousedown';
var INPUT = 'input';
var MAX_ROTATION = 35;
var SOFTEN_FACTOR = 3;

var RangeInput = function () {
	function RangeInput(el) {
		_classCallCheck(this, RangeInput);

this.el = el;

this._handleEnd = this._handleEnd.bind(this);
		this._handleStart = this._handleStart.bind(this);
		this._handleInput = this._handleInput.bind(this);

//Call the plugin
		$(this.el.querySelector('input[type=range]')).rangeslider({
			polyfill: false, //Never use the native polyfill
			rangeClass: 'rangeslider',
			disabledClass: 'rangeslider-disabled',
			horizontalClass: 'rangeslider-horizontal',
			verticalClass: 'rangeslider-vertical',
			fillClass: 'rangeslider-fill-lower',
			handleClass: 'rangeslider-thumb',
			onInit: function onInit() {
				//No args are passed, so we can't change context of this
				var pluginInstance = this;

//Move the range-output inside the handle so we can do all the stuff in css
				$(pluginInstance.$element).parents('.range').find('.range-output').appendTo(pluginInstance.$handle);
			}
		});

this.sliderThumbEl = el.querySelector('.rangeslider-thumb');
		this.outputEl = el.querySelector('.range-output');
		this.inputEl = el.querySelector('input[type=range]');
		this._lastOffsetLeft = 0;
		this._lastTimeStamp = 0;

this.el.querySelector('.rangeslider').addEventListener(START, this._handleStart);
	}

RangeInput.prototype._handleStart = function _handleStart(e) {
		var _this = this;

this._lastTimeStamp = new Date().getTime();
		this._lastOffsetLeft = this.sliderThumbEl.offsetLeft;

//Wrap in raf because offsetLeft is updated by the plugin after this fires
		requestAnimationFrame(function (_) {
			//Bind through jquery because plugin doesn't fire native event
			$(_this.inputEl).on(INPUT, _this._handleInput);
			$(_this.inputEl).on(END, _this._handleEnd);
		});
	};

RangeInput.prototype._handleEnd = function _handleEnd(e) {
		var _this2 = this;

//Unbind through jquery because plugin doesn't fire native event
		$(this.inputEl).off(INPUT, this._handleInput);
		$(this.inputEl).off(END, this._handleEnd);

requestAnimationFrame(function (_) {
			return _this2.outputEl.style.transform = 'rotate(0deg)';
		});
	};

RangeInput.prototype._handleInput = function _handleInput(e) {
		var _this3 = this;

var now = new Date().getTime();
		var timeElapsed = now - this._lastTimeStamp || 1;
		var distance = this.sliderThumbEl.offsetLeft - this._lastOffsetLeft;
		var direction = distance < 0 ? -1 : 1;
		var velocity = Math.abs(distance) / timeElapsed; //pixels / millisecond
		var targetRotation = Math.min(Math.abs(distance * velocity) * SOFTEN_FACTOR, MAX_ROTATION);

requestAnimationFrame(function (_) {
			return _this3.outputEl.style.transform = 'rotate(' + targetRotation * -direction + 'deg)';
		});

this._lastTimeStamp = now;
		this._lastOffsetLeft = this.sliderThumbEl.offsetLeft;
	};

return RangeInput;
}();

new RangeInput(document.querySelector('.range'));

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg