diff --git a/frontend/components/sliders/slider-percent.js b/frontend/components/sliders/slider-percent.js new file mode 100644 index 0000000..ff0c160 --- /dev/null +++ b/frontend/components/sliders/slider-percent.js @@ -0,0 +1,21 @@ +// slider-percentage +const sliderPercentageChange = function sliderPercentageChange(element) { + const { value } = element; + const width = element.parentElement.clientWidth - 20; + const min = element.attributes.min.value; + const max = element.attributes.max.value; + element.previousElementSibling.style.width = (((width / (max - min)) * (value - min)) + 1) + 'px'; +}; + +const sliderPercentageInput = function sliderPercentageInput(event) { + sliderPercentageChange(event.target); +}; + +(function initSliders() { + const elements = document.querySelectorAll('input.js-slider-percent__input'); + for (let i = 0; i < elements.length; i += 1) { + sliderPercentageChange(elements[i]); + elements[i].oninput = sliderPercentageInput; + } +}()); + diff --git a/frontend/components/sliders/slider-percent.pug b/frontend/components/sliders/slider-percent.pug new file mode 100644 index 0000000..a390146 --- /dev/null +++ b/frontend/components/sliders/slider-percent.pug @@ -0,0 +1,13 @@ +mixin slider-percent(value) + if(!value) + -value = 50 + .slider-percent + .slider-percent__full-line + .slider-percent__line + input(class="slider-percent__input js-slider-percent__input" type="range" min="0" max="100" value=value) + .slider-percent__container + div 0 + div 25 + div 50 + div 75 + div 100 diff --git a/frontend/components/sliders/slider-percent.styl b/frontend/components/sliders/slider-percent.styl new file mode 100644 index 0000000..ea58f06 --- /dev/null +++ b/frontend/components/sliders/slider-percent.styl @@ -0,0 +1,51 @@ +slider-percent(font,$color) + // track - линия + $track-color = lightgray + // thumb - ручка/ползунок + $thumb-color = $color[0] + $thumb-radius = 10px + $thumb-size = 20px + + track() + width 100% + height 5px + border-radius 5px + background-color $track-color + cursor pointer + thumb() + margin-top -7.5px + height $thumb-size + width $thumb-size + border-radius $thumb-radius + background $thumb-color + cursor pointer + .slider-percent + position relative + font-family font + &__full-line + background-color $track-color + width 100% + height 5px + border-radius 5px + position absolute + top 40px + left 0 + &__line + background-color $thumb-color + width 10px + height 5px + border-radius 5px + position absolute + top 40px + left 0 + input.slider-percent__input + background-color transparent + &::-webkit-slider-runnable-track + background-color transparent + &__container + margin 0 -10px + color lightgrey + font-size 10px + display flex + justify-content space-around + align-items flex-start \ No newline at end of file diff --git a/frontend/components/sliders/slider.js b/frontend/components/sliders/slider.js new file mode 100644 index 0000000..d21f4f5 --- /dev/null +++ b/frontend/components/sliders/slider.js @@ -0,0 +1,21 @@ +// slider +const sliderChange = function sliderChange(element) { + const { value } = element; + const width = element.parentElement.clientWidth - 20; + const min = element.attributes.min.value; + const max = element.attributes.max.value; + element.previousElementSibling.innerText = value; + element.previousElementSibling.style.left = (((width / (max - min)) * (value - min)) - 8.75) + 'px'; +}; + +const sliderInput = function sliderInput(event) { + sliderChange(event.target); +}; + +(function initSliders() { + const elements = document.querySelectorAll('.js-slider__input'); + for (let i = 0; i < elements.length; i += 1) { + sliderChange(elements[i]); + elements[i].oninput = sliderInput; + } +}()); diff --git a/frontend/components/sliders/slider.pug b/frontend/components/sliders/slider.pug new file mode 100644 index 0000000..5b22c1b --- /dev/null +++ b/frontend/components/sliders/slider.pug @@ -0,0 +1,12 @@ +mixin slider(options) + if !options + - options = {} + if (!options.min) + - options.min = 0 + if (!options.max) + - options.max = 10 + if (!options.value) + - options.value = Math.ceil((options.max - options.min) / 2) + .slider + .slider__view #{options.value} + input(class="slider__input js-slider__input" type="range" min=options.min max=options.max value=options.value) diff --git a/frontend/components/sliders/slider.styl b/frontend/components/sliders/slider.styl new file mode 100644 index 0000000..b6e88fe --- /dev/null +++ b/frontend/components/sliders/slider.styl @@ -0,0 +1,78 @@ +slider(font,$color) + // track - линия + $track-color = lightgray + // thumb - ручка/ползунок + $thumb-color = $color[0] + $thumb-radius = 10px + $thumb-size = 20px + + track() + width 100% + height 5px + border-radius 5px + background-color $track-color + cursor pointer + thumb() + margin-top -7.5px + height $thumb-size + width $thumb-size + border-radius $thumb-radius + background $thumb-color + cursor pointer + .slider + position relative + font-family font + .slider__view + position absolute + width 35px + height 24px + background-color $thumb-color + border-radius 5px + top 0px + left 50% - 17.5px + + color white + text-align center + line-height 24px + &::after + content '' + bottom -2px + left 15.7px + position absolute + width 5px + height 5px + background-color inherit + transform rotate(-45deg) + input.slider__input + -webkit-appearance none + -moz-appearance none + width 100% + margin 40px 0 0 0 + &:focus + outline none + &::-webkit-slider-runnable-track + track() + &::-webkit-slider-thumb + thumb() + -webkit-appearance none + + &::-moz-range-track + track() + &::-moz-range-thumb + thumb() + border none + + &::-ms-track + track() + background transparent + border-color transparent + border-width $thumb-size 0 + color transparent + &::-ms-fill-lower + background yellow + border-radius 10px + &::-ms-fill-upper + background $track-color + border-radius 10px + &::-ms-thumb + thumb()