Question

嗨我有一个带有一个手柄的jquery滑块。我想将滑块分成3个相等的部分，以便每个部分都有自己的颜色。我不认为jquery滑块具有该功能，如果不是，我希望有人可以指向任何基于javascript的滑块。

喜欢这个

谢谢！

Answer 1

你走了。您可以使用 Bootstrap + JQuery UI Slider 来实现。如果这是你想要实现的，请告诉我。继续编码。

$(function() { $("#slider").slider(); });

.container { padding: 2vw; }

#slider { border: 1px solid white; }

.bg1, .bg2, .bg3 { height: 100%; }

.bg1 { background-color: salmon; }

.bg2 { background-color: green; }

.bg3 { background-color: #6dd5ff; }

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div id="slider">
          <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1 bg1"></div>
          <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1 bg2"></div>
          <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1 bg3"></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Answer 2

没有JQuery-UI的纯CSS（如果你想避免这种情况）。感谢css-tricks。

<!doctype html>

<html lang="en">
<head>

<style>
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 300px; /* Specific width is required for Firefox. */
height:10px;
background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background: white;
height: 30px;
width:30px;
border-radius:50%;
border:1px solid gray;
}

input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some       kind of focus styling for accessibility reasons though. */
}

.foo {
width: 300px;
background:aqua;
z-index: -999;
border-radius: 8px;
}
.bar {
width:200px;
background: purple;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.bas {
width:100px;
background: pink;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

    </style>
</head>
<body>
I like sliders.
    <div class="foo">
        <div class="bar">
            <div class="bas">
                <input type="range" id="myRange" value="50">
            </div>
        </div>
    </div>
</body>
</html>

Answer 3

我记得我也为我的项目（长期和旧项目）寻找这个。无论如何，关键字有时对于能够在Google搜索引擎上进行搜索非常重要。 “jQuery Color Slider Picker”。

尝试访问：jQuery Color Picker Sliders

我相信这就是你要找的。

Jquery滑块有多种背景颜色

3 个答案: