Permalink
Browse files

feat(slider): started with js for changing slider colors

  • Loading branch information...
Freihofner, Katrin Freihofner, Katrin
Freihofner, Katrin authored and Freihofner, Katrin committed Sep 6, 2016
1 parent aa0f035 commit 61e46998dae3d58f3e3d5d672323acbe79f989f7
Showing with 39 additions and 12 deletions.
  1. +1 −0 src/main.js
  2. +21 −0 src/slider/slider.js
  3. +17 −12 src/slider/slider.scss
View
@@ -1,3 +1,4 @@
require('./js-common-components/toggler');
require('./expandable/expandable');
require('./inputfield/inputfield');
require('./slider/slider');
View
@@ -0,0 +1,21 @@
import $ from '../js-common-components/dollar';
function colorRangeInput() {
// this.classList.remove('slider');
// this.classList.add('slider--js');
const currentValue = ((this.value - this.min) / (this.max - this.min)) * 100;
this.style.background =
`linear-gradient(to right, #00a1b2 0%, #00a1b2 ${currentValue}%,
#ccc ${currentValue}%, #ccc 100%)`;
}
const colorRange = () => {
$('input[type=range]').forEach(el => {
if (!el.getAttribute('data-initialized')) {
el.addEventListener('change', colorRangeInput);
el.setAttribute('data-initialized', true);
}
});
};
colorRange();
View
@@ -1,6 +1,7 @@
@import "../common/variables";
.slider {
.slider,
.slider--js {
font-family: $mainfont;
appearance: none;
position: relative;
@@ -11,8 +12,8 @@
background-color: transparent;
}
.slider::-webkit-slider-thumb {
margin-top: -6px;
.slider::-webkit-slider-thumb,
.slider--js::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
@@ -41,11 +42,13 @@
cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
.slider,
.slider--js {
width: 100%;
max-width: 320px;
height: 2px;
cursor: pointer;
background: $disabledcolor;
background: linear-gradient(to right, $turquoise-600 0%, $turquoise-600 50%, $disabledcolor 50%, $disabledcolor 100%);
border-radius: 1px;
}
@@ -72,31 +75,33 @@
}
.slider::-ms-tooltip {
display: none;
display: none;
}
.slider:hover {
.slider:hover,
.slider--js:hover {
text-decoration: none;
}
.slider:focus {
.slider:focus,
.slider--js:focus {
outline: none;
}
.slider:focus::-webkit-slider-thumb {
outline: 0;
outline: none;
border-color: $focuscolor;
box-shadow: 0 0 0 1px $focuscolor;
}
.slider:focus::-moz-range-thumb {
outline: 0;
outline: none;
border-color: $focuscolor;
box-shadow: 0 0 0 1px $focuscolor;
}
.slider:focus::-ms-thumb {
outline: 0;
outline: none;
border-color: $focuscolor;
box-shadow: 0 0 0 1px $focuscolor;
}
@@ -113,7 +118,7 @@
background: $turquoise-700;
}
.slider:active::-webkit-slider-thumb {
.slider:active::-webkit-slider-thumb {
background: $turquoise-800;
}

0 comments on commit 61e4699

Please sign in to comment.