CSS와 JavaScript를 활용한 input range를 디자인 하도록 하겠다.
특별한 경우가 아니면 사용을 잘 쓰지 않는다.
개인적으로는 수치값을 표기 하는 것 까지는 작업을 해도
Range의 스타일 변경하는건 추천 하지 않는다.
하지만 필요한 경우가 있다면 다음 소를 잘 참조하여 이쁘게 만들어 보는 것도 공부이니깐.
<html>
| <div class="range-box"> <div class="range-slider"> <input class="range-slider__range" type="range" value="50" min="0" max="100" step="10"> <span class="range-slider__value">0</span> </div> </div> | cs |
<CSS>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | .range-box { padding: 10px; }
.range-slider { width: 100%; margin-bottom: 20px; }
.range-slider__range { -webkit-appearance: none; width: calc(300px - (63px)); height: 15px; border-radius: 5px; background: #dfdfdf; outline: none; padding: 0; margin: 0; } .range-slider__range::-webkit-slider-thumb { appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #ff9900; cursor: pointer; transition: background 0.15s ease-in-out; } .range-slider__range::-webkit-slider-thumb:hover { background: #000000; } .range-slider__range:active::-webkit-slider-thumb { background: #000000; } .range-slider__range::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: #ff9900; cursor: pointer; transition: background 0.15s ease-in-out; } .range-slider__range::-moz-range-thumb:hover { background: #000000; } .range-slider__range:active::-moz-range-thumb { background: #000000; } .range-slider__range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px 10px, 0 0 0 6px 20px; }
.range-slider__value { display: inline-block; position: relative; width: 50px; color: 10px; line-height: 20px; text-align: center; border-radius: 3px; background: #ff9900; padding: 5px 10px; margin-left: 8px; } .range-slider__value:after { position: absolute; top: 8px; left: -7px; width: 0; height: 0; border-top: 7px solid transparent; border-right: 7px solid #ff9900; border-bottom: 7px solid transparent; content: ""; }
::-moz-range-track { background: #dfdfdf; border: 0; }
input::-moz-focus-inner, input::-moz-focus-outer { border: 0; } | cs |
<JavaScript>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var rangeSlider = function(){ var slider = $('.range-slider'), range = $('.range-slider__range'), value = $('.range-slider__value'); slider.each(function(){ value.each(function(){ var value = $(this).prev().attr('value'); $(this).html(value); }); range.on('input', function(){ $(this).next(value).html(this.value); }); }); }; rangeSlider(); | cs |
CSS가 복잡하여 위에서도 언급한거 처럼 추천하지는 않는다.
고부를 목적으로 한다면 CSS코드 분석은 필수 이다.
그리고 CSS를 왜 구지 Sass(SCSS), Less, Stylus로 작업을 해야 하는지 잘 모르겠다.
이 부분에 대해서 나중에 한번 이야기 하도록 하겠다.