jquery.ui.touch-punch+TweenMax实现橡胶弹性滑动价格区间范围选择取值器代码-html代码-BFW代码库

代码语言：html

代码描述：jquery.ui.touch-punch+TweenMax实现橡胶弹性滑动价格区间范围选择取值器代码，拖动圆点进行选择。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap'>

    <style>
        body.ui-slider-active {
          cursor: -webkit-grabbing;
          cursor: grabbing;
        }
        
        .box {
          --primary: #275efe;
          --headline: #3F4656;
          --text: #99A3BA;
          width: 100%;
          max-width: 312px;
          padding: 36px 32px 48px 32px;
          background: #fff;
          border-radius: 9px;
          box-shadow: 0 1px 4px rgba(18, 22, 33, 0.12);
        }
        .box h3 {
          font-family: inherit;
          font-size: 32px;
          font-weight: 700;
          margin: 0 0 20px 0;
          color: var(--headline);
        }
        .box h3 span {
          font-weight: 500;
        }
        .box .values div,
        .box small div {
          display: inline-block;
          vertical-align: top;
        }
        .box .values {
          margin: 0;
          font-weight: 500;
          color: var(--primary);
        }
        .box .values > div:first-child {
          margin-right: 2px;
        }
        .box .values > div:last-child {
          margin-left: 2px;
        }
        .box small {
          color: var(--text);
          display: block;
          margin-top: 8px;
          font-size: 14px;
        }
        .box .slider {
          margin-top: 40px;
        }
        
        .slider {
          --primary: #275efe;
          --handle: #fff;
          --handle-active: #becfff;
          --handle-hover: #e9efff;
          --handle-border: 2px solid var(--primary);
          --line: #cdd9ed;
          --line-active: var(--primary);
          height: 23px;
          width: 100%;
          position: relative;
          pointer-events: none;
        }
        .slider .ui-slider-handle {
          --y: 0;
          --background: var(--handle);
          cursor: -webkit-grab;
          cursor: grab;
          -webkit-tap-highlight-color: transparent;
          top: 0;
          width: 23px;
          height: 23px;
          transform: translateX(-50%);
          position: absolute;
          outline: none;
          display: block;
          pointer-events: auto;
        }
        .slider .ui-slider-handle div {
          width: 23px;
          height: 23px;
          border-radius: 50%;
          transition: background 0.4s ease;
          transform: translateY(calc(var(--y) * 1px));
          border: var(--handle-border);
          background: var(--background);
        }
        .slider .ui-slider-handle:hover {
          --background: var(--handle-hover);
        }
        .slider .ui-slider-handle:active {
          --background: var(--handle-active);
          cursor: -webkit-grabbing;
          cursor: grabbing;
        }
        .slider svg {
          --stroke: var(--line);
          display: block;
          height: 83px;
        }
        .slider svg path {
          fill: none;
          stroke: var(--stroke);
          stroke-width: 1;
        }
        .slider .active, .slider > svg {
          position: absolute;
          top: -30px;
          height: 83px;
        }
        .slider > svg {
          left: 0;
          width: 100%;
        }
        .slider .active {
          position: absolute;
          overflow: hidden;
          left: calc(var(--l) * 1px);
          right: calc(var(--r) * 1px);
        }
        .slider .active svg {
          --stroke: var(--line-active);
          position: relative;
          left: calc(var(--l) * -1px);
          right: calc(var(--r) * -1px);
        }
        .slider .active svg path {
          stroke-width: 2;
        }
        
        html {
          box-sizing: border-box;
          -webkit-font-smoothing: antialiased;
        }
        
        * {
          box-sizing: inherit;
        }
        *:before, *:after {
          box-sizing: inherit;
        }
        
        body {
          min-height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: "Roboto", Arial;
          background: #CDD9ED;
        }
        body .dribbble {
          position: fixed;
          display: block;
          right: 20px;
          bottom: 20px;
        }
        body .dribbble img {
          display: block;
          height: 28px;
        }
    </style>



</head>

<body>
    <div class="box">

        <h3>Price <span>Range</span></h3>
        <div class="values">
            <div>$<span id="first"></span></div> -
            <div>$<span id="second"></span></div>
        </div>
        <small>
        Current Range:
        <div>$<span id="third"></span></div>
    </small>

        <div class="slider" data-value-0="#first" data-value-1="#second" data-range="#third"></div>

    </div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.11.0.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script>
        $('.slider').each(function (e) {
        
          var slider = $(this),
          width = slider.width(),
          handle,
          handleObj;
        
          let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
          svg.setAttribute('viewBox', '0 0 ' + width + ' 83');
        
          slider.html(svg);
          slider.append($('<div>').addClass('active').html(svg.cloneNode(true)));
        
          slider.slider({
            range: true,
            values: [1800, 7800],
            min: 500,
            step: 5,
            minRange: 1000,
            max: 12000,
            create(event, ui) {
        
              slider.find('.ui-slider-handle').append($('<div />'));
        
              $(slider.data('value-0')).html(slider.slider('values', 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, '&thinsp;'));
              $(slider.data('value-1')).html(slider.slider('values', 1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, '&thinsp;'));
              $(slider.da.........完整代码请登录后点击上方下载按钮下载查看