nouislider绳形滑块滑动效果-html代码-BFW代码库

代码语言：html

代码描述：nouislider绳形滑块滑动效果，结合gsap实现更灵活

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,700&amp;display=swap'>
<style>
.slider {
  --handle: #362A89;
  --line: #D1D6EE;
  --line-active: #362A89;
  --value-color: #362A89;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 320px;
  height: 2px;
  border-radius: 1px;
  position: relative;
}
.slider svg {
  display: block;
  height: 83px;
}
.slider svg path {
  fill: none;
  stroke: var(--stroke, var(--line));
  stroke-width: 2;
}
.slider .active, .slider > svg {
  position: absolute;
  left: 0;
  top: -41px;
  height: 83px;
}
.slider > svg {
  width: 100%;
}
.slider .active {
  position: absolute;
  overflow: hidden;
  width: calc(var(--active-width) * 1px);
}
.slider .active svg {
  --stroke: var(--line-active);
  width: var(--slider-width);
}
.slider .noUi-handle {
  --y: 0;
  cursor: -webkit-grab;
  cursor: grab;
}
.slider .noUi-handle .point {
  position: relative;
  -webkit-transform: translateY(calc(var(--y) * 1px));
          transform: translateY(calc(var(--y) * 1px));
}
.slider .noUi-handle .point:before {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--handle);
  -webkit-transform: scale(var(--handle-scale, 0.75)) translateZ(0);
          transform: scale(var(--handle-scale, 0.75)) translateZ(0);
  -webkit-transition: -webkit-transform .25s ease;
  transition: -webkit-transform .25s ease;
  transition: transform .25s ease;
  transition: transform .25s ease, -webkit-transform .25s ease;
}
.slider .noUi-handle .point .value {
  position: absolute;
  left: 50%;
  bottom: 100%;
  font-size: 12px;
  font-weight: 500;
  color: var(--value-color);
  pointer-events: none;
  opacity: var(--value-o, 0);
  -webkit-transform: translate(-50%, var(--value-y, 0)) scale(var(--value-scale, 0.5)) translateZ(0);
          transform: translate(-50%, var(--value-y, 0)) scale(var(--value-scale, 0.5)) translateZ(0);
  -webkit-transition: opacity .25s linear, -webkit-transform .25s ease;
  transition: opacity .25s linear, -webkit-transform .25s ease;
  transition: transform .25s ease, opacity .25s linear;
  transition: transform .25s ease, opacity .25s linear, -webkit-transform .25s ease;
}
.slider .noUi-handle.noUi-active {
  --handle-scale: 1;
  --value-o: 1;
  --value-y: -8px;
  --value-scale: 1;
}
.slider * {
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.slider.noUi-state-tap .noUi-connect, .slider.noUi-state-tap .noUi-origin {
  -webkit-transition: -webkit-transform .25s;
  transition: -webkit-transform .25s;
  transition: transform .25s;
  transition: transform .25s, -webkit-transform .25s;
}
.slider .noUi-target {
  position: relative;
}
.slider .noUi-base,
.slider .noUi-connects {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.slider .noUi-origin,
.slider .noUi-connect {
  position: absolute;
  will-change: transform;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  top: 0;
  left: 0;
  z-index: 1;
}
.slider .noUi-connects {
  overflow: hidden;
  z-index: 0;
  border-radius: 1px;
}
.slider .noUi-connects .noUi-connect {
  width: 100%;
  height: 100%;
}
.slider .noUi-handle {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  outline: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  left: 16px;
  top: -15px;
}
.slider .noUi-origin {
  left: auto;
  right: 0;
  height: 0;
  width: 10%;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: 'Inter', Arial;
  background: #F6F8FF;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
body .twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}
body .twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}
</style>

</head>
<body translate="no">
<div class="slider"></div>

<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13..........完整代码请登录后点击上方下载按钮下载查看