언어/JavaScript
[input range] 커스텀
홍시_코딩기록
2024. 6. 25. 20:54
어제 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>
그라디언트로 조절하는 방법
완전 천재 만재