여러 배경색을 가진 Jquery 슬라이더

안녕하세요 하나의 핸들이있는 jquery 슬라이더가 있습니다. 슬라이더를 3 등분하여 각 부분마다 고유 한 색이 있도록하고 싶습니다. 나는 jquery 슬라이더가 그 기능을 가지고 있다고 생각하지 않는다. 그렇지 않다면 나는 누군가가 자바 스크립트 기반의 자바 스크립트를 가리킬 수 있기를 바라고있다. 이여러 배경색을 가진 Jquery 슬라이더

감사처럼

출처

2017-04-05 Kevin

당신이 지금까지해온 것을 말해주십시오., 우리에게 링크를주십시오. 귀하의 코드., – smzapp

여기 있습니다. 부트 스트랩 + JQuery UI 슬라이더을 사용하면됩니다. 이것이 내가 원하는 것일 지 알려주세요. 계속 코딩하십시오.

$(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>

JQuery와 - UI없이

출처

2017-04-06 00:09:38

정확히 무엇을 찾고있어! 감사합니다 – Kevin

당신은 사람을 환영합니다. –

나는 나의 프로젝트 (길고 오래된 프로젝트)를 위해 이것을 또한 기억한다. 어쨌든 Google 검색 엔진에서 키워드를 검색하는 데 중요 할 때가 있습니다. "jQuery 색상 슬라이더 피커".

이 방문보십시오 : jQuery Color Picker Sliders

나는 이것이 당신이 찾고있는 것을 믿습니다.

출처

2017-04-06 00:03:14 iMarkDesigns

순수 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 슬라이더

답변

관련 문제