input range 커스텀

로또 낙첨되서 기분이 썩 좋진 않습니다,,

 

input range를 커스텀 하려고 한다.

인풋 버튼이 인풋 밖으로 튀어나오지 않으면 css만으로도 가능하지만

여차저차해서 테스트로 만들어봤다.

<div class="emotion_state">
    <div class="state_image">이미지</div>
    <h1 class="state_text">보통</h1>
    <div class="range_wrap">
        <div class="range_fill" style="width: 50%;"></div>
        <input class="emotion_range" type="range" min="0" max="100" step="25" value="50">
    </div>
</div>

 

.range_fill 인풋 색깔 채워주기 위해 만들었다.

 

.state_image {
    transition: .2s all; 
    background: salmon; 
    width: 40px;
    height: 40px; 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden;
}
.emotion_state.bad .state_image {background: skyblue;}
.emotion_state.good .state_image {background: palevioletred;}
.emotion_state.joy .state_image {background: rebeccapurple;}
.emotion_state.soso .state_image {background: khaki;}
.state_text {text-align: center;}
.state_text.active {
    transform: scale(1.2); 
    transform-origin: center; 
    transition: all .2s;
}
.range_wrap {
    position: relative; 
    width: 400px; 
    height: 10px;
}
.range_fill {
    background: blue; 
    height: 100%; 
    position: absolute; 
    border-radius: 10px;
}
input[type=range] {
    display: block;
    -webkit-appearance: none;
    background-color: #bdc3c7;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    margin: 0 auto;
    outline: 0;
}
input[type="range"]::-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-radius: 50%;
    border: 2px solid white;
    cursor: pointer;
    transition: .3s ease-in-out;
}​
input[type="range"]::-webkit-slider-thumb:hover {
    background-color: red;
}
input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.6);
}

thumb에 border로 투명 테두리를 넣었더니 투명도가 안먹혀서 그림자로 넣어줬다.

hover를 넣어야 크기 효과가 작동해서 넣어줌.

 

 

const emotionRange = document.querySelector('.emotion_range');

const rangeValue = () => {
    const emotionState = document.querySelector('.emotion_state');
    const stateText = emotionState.querySelector('.state_text');
    const rangeFill = emotionState.querySelector('.range_fill');
    const value = Number(emotionRange.value);

    rangeFill.style.width = `${emotionRange.value}%`

    emotionState.classList.remove('bad', 'soso', 'joy', 'good');
        stateText.classList.add('active')

    if(value === 0) {
        emotionState.classList.add('bad');
        stateText.textContent = "나쁨"
    }  else if (value === 25) {
        emotionState.classList.add('soso');
        stateText.textContent = '걍그럼';
    } else if (value === 50) {
        stateText.textContent = '보통';
    } else if (value === 75) {
        emotionState.classList.add('joy');
        stateText.textContent = '기쁨';
    } else if (value === 100) {
        emotionState.classList.add('good');
        stateText.textContent = '좋음';
    }
    // 효과를 위해서
    setTimeout(() => {
        stateText.classList.remove('active')
    }, 200);
    console.log(value)
}

emotionRange.addEventListener("input", rangeValue)

 

그리고 자바스크립트 슥삭슥삭

 

input value만큼 .range_fill을 채워주고

값에 따라 텍스트랑 클래스도 변경해준다.

컬러 말고도 다양한 디자인으로 변경 가능하게 상위 클래스를 변경해줌 

timeout은 텍스트 효과를 주기 위해서 .2초 넣었다.

See the Pen input range custom by _홍시 (@wlcbybsd-the-sasster) on CodePen.