sliders

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;
+  }
+}());
+

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

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

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;
+  }
+}());

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)

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()