어제 range 커스텀을 했는데 더 간단한 방법을 찾았잖아...!
완전 럭키비키..🍀
<style>
.rangeInput{
width: 90%;
background: linear-gradient(to right, #FFE283 0%, #FFE283 50%, #ececec 50%, #ececec 100%);
border-radius: 8px;
outline: none;
transition: background 450ms ease-in;
-webkit-appearance: none;
/* accent-color: #ffca1d; */
}
.rangeInput::-webkit-slider-thumb {
position:relative;
z-index:1;
-webkit-appearance: none;
background-color: #fff;
width: 22px;
height: 22px;
border-radius: 50%;
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1);
border: 2px solid white;
cursor: pointer;
transition: .3s ease-in-out;
}
</style>
</head>
<body>
<input id="rangeInput" class="rangeInput" style="" max="10" min="0" step="1" type="range" />
</body>
<script>
document.querySelector('.rangeInput').addEventListener('input',function(event){
var gradient_value = 100 / event.target.attributes.max.value;
event.target.style.background = 'linear-gradient(to right, #FFE283 0%, #FFE283 ' + gradient_value * event.target.value + '%, rgb(236, 236, 236) ' + gradient_value * event.target.value + '%, rgb(236, 236, 236) 100%)';
});
</script>
그라디언트로 조절하는 방법
완전 천재 만재
'언어 > JavaScript' 카테고리의 다른 글
| 스크롤 내려서 화면에 동영상이 보일 때만 재생 (0) | 2024.07.19 |
|---|---|
| [Swiper] 스와이퍼 여러 개를 설정해보자 multiple swiper (0) | 2024.07.03 |
| input range 커스텀 (0) | 2024.06.24 |
| [자바스크립트 딥다이브] 8장 제어문 (0) | 2024.04.02 |
| [자바스크립트 딥다이브] 7장 연산자 (0) | 2024.04.01 |