양방향 range 커스텀 관련 문의
본문
https://codepen.io/eve712/pen/KKWZdxE
위에 소스를 이용해서 범위는 최소 18~최대 60 사이로 양쪽을 꽉차게 만들고 싶은데
js초보라 어디 부분을 수정을 해야할지 모르겠네요 ㅠㅠ
혹시 방법 알려주실 고수분 계실까요..?
답변 1
html 과 css 만 수정해주면 됩니다.
html
<div class="middle">
<div class="multi-range-slider">
<input type="range" id="input-left" min="18" max="60" value="18" />
<input type="range" id="input-right" min="18" max="60" value="60" />
<div class="slider">
<div class="track"></div>
<div class="range"></div>
<div class="thumb left"></div>
<div class="thumb right"></div>
</div>
</div>
</div>
css
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #e5e5e5;
}
.middle {
position: relative;
width: 50%;
max-width: 500px;
}
.slider {
position: relative;
z-index: 1;
height: 10px;
margin: 0 15px;
}
.slider > .track {
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 5px;
background-color: #c6aee7;
}
.slider > .range {
position: absolute;
z-index: 2;
left: 0%;
right: 0%;
top: 0;
bottom: 0;
border-radius: 5px;
background-color: #6200ee;
}
.slider > .thumb {
position: absolute;
z-index: 3;
width: 30px;
height: 30px;
background-color: #6200ee;
border-radius: 50%;
}
.slider > .thumb.left {
left: 0%;
transform: translate(-15px, -10px);
}
.slider > .thumb.right {
right: 0%;
transform: translate(15px, -10px);
}
input[type="range"] {
position: absolute;
/* opacity로 가린 것을 이벤트도 비활성화하기 위해 */
pointer-events: none;
-webkit-appearance: none;
z-index: 2;
height: 10px;
width: 100%;
opacity: 0;
}
input[type="range"]::-webkit-slider-thumb {
/* 겹쳐진 두 thumb를 모두 활성화 */
pointer-events: all;
width: 30px;
height: 30px;
border-radius: 0;
border: 0 none;
background-color: red;
cursor: pointer;
/* appearance를 해야 위의 스타일들을 볼 수 있음 */
-webkit-appearance: none;
}
답변을 작성하시기 전에 로그인 해주세요.
