Jquery滑塊與多種背景顏色

嗨我有一個手柄jQuery滑塊。我想將滑塊分成3個相等的部分，以便每個部分都有自己的顏色。我不認爲jQuery滑塊具有該功能，如果沒有，我希望有人可以指向我的任何基於JavaScript的。Jquery滑塊與多種背景顏色

像這樣

謝謝！

2017-04-05 Kevin

告訴我們你到目前爲止做了什麼，給我們鏈接。你的代碼， – smzapp

你在這裏。你可以通過使用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>

來源

2017-04-06 00:09:38

究竟是什麼即時通訊尋找！謝謝 – Kevin

不客氣的人 –

我記得我也爲我的項目尋找這個（長期和舊項目）。無論如何，關鍵字有時很重要，可以在Google搜索引擎上進行搜索。「jQuery彩色滑塊選取器」。

嘗試訪問這個：jQuery Color Picker Sliders

我相信這是你在尋找什麼。

來源

2017-04-06 00:03:14 iMarkDesigns

沒有jQuery的UI純CSS（如果你想避免這種情況）。感謝CSS技巧。

<!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>

來源

2017-04-06 00:35:20 Pollux

Jquery滑塊與多種背景顏色

回答

相關問題