jquery实现一个滑块拖动选择器美化效果代码-html代码-BFW代码库

代码语言：html
代码描述：jquery实现一个滑块拖动选择器美化效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
    <style>
        .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;
        }
    </style>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>
<body>
  <main>
  <form oninput="output.value = Math.round(range.valueAsNumber / 1000)">
    <h2>
      Range slider
    </h2>
    <div class="range">
      <input name="range" type="range" min="0" max="100000">
      <div class="range-output">
        <output class="output" name="output" for="range">
          50
        </output>
      </div>
    </div>
  </form>
</main>
   <script>
        '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;
        }();

        /*! rangeslider.js - v2.1.1 | (c) 2016 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */

        !function (a) {
            "use strict";
            "function" == typeof define && define.amd ? define(["jquery"], a): "object" == (typeof exports === 'undefined' ? 'undefined': _typeof(exports)) ? module.exports = a(require("jquery")): a(jQuery);
        }(function (a) {
                "use strict";
                function b() {
                    var a = document.createElement("input"); return a.setAttribute("type", "range"), "text" !== a.type;
                }function c(a, b) {
                    var c = Array.prototype.slice.call(arguments, 2); return setTimeout(function () {
                        return a.apply(null, c);
                    }, b);
                }function d(a, b) {
                    return b = b || 100, function () {
                        if (!.........完整代码请登录后点击上方下载按钮下载查看