<div class="field-group js-range-wrapper">
<label for="value" class="">Värde</label>
<input type="text" class="a-input a-input--small a-range-input js-range-input" value="0">
<input type="range" class="a-range a-range--no-preview js-range" id="value" value="0" min="0" max="100" step="1">
<output class="a-range__value js-range-value"></output>
</div>
<div class="field-group js-range-wrapper">
<label for="{{id}}" class="{{labelClasses}}">{{label}}</label>
{{#if input}}<input type="text" class="a-input a-input--small a-range-input js-range-input" value="{{value}}">{{/if}}
<input type="range" class="a-range{{#if no_preview}} a-range--no-preview{{/if}} js-range" id="{{id}}" value="{{value}}" min="{{min}}" max="{{max}}" step="{{step}}"{{#if disabled}} disabled{{/if}}>
<output class="a-range__value js-range-value"></output>
</div>
{
"label": "Värde",
"id": "value",
"disabled": false,
"value": "0",
"min": "0",
"max": "100",
"step": "1",
"no_preview": true,
"input": true
}
@charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@include mixin.atom(range) {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
width: 100%;
position: relative;
&::-webkit-slider-runnable-track {
background-color: colors.$color-concrete;
height: func.rhythm(1);
border-radius: var.$border-radius;
border-top: 1px solid color.adjust(colors.$color-granit, $lightness: 15%);
}
&::-moz-range-track {
background-color: colors.$color-concrete;
height: func.rhythm(1);
border-radius: var.$border-radius;
border-top: 1px solid colors.$color-granit;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
margin-top: -#{func.rhythm(1.125)};
background-color: colors.$color-ash;
height: func.rhythm(3);
width: func.rhythm(1.5);
border: 1px solid colors.$color-granit;
border-radius: var.$border-radius;
}
&::-moz-range-thumb {
background-color: colors.$color-ash;
height: func.rhythm(3);
width: func.rhythm(1.5);
border-radius: 0;
border: 0;
border: 1px solid colors.$color-granit;
border-radius: var.$border-radius;
}
&:focus {
outline: none;
box-shadow: none !important;
& + output {
background-color: colors.$color-ocean-light;
&::after {
border-bottom-color: colors.$color-ocean-light;
}
}
}
&:disabled {
cursor: not-allowed;
opacity: 0.45;
& + output {
cursor: not-allowed;
opacity: 0.45;
}
}
&:focus::-webkit-slider-thumb {
background-color: colors.$color-snow;
border-color: colors.$color-ocean;
box-shadow: 0 0 0 inset rgba(colors.$color-cyberspace, 0.2), 0 1px 2px rgba(colors.$color-cyberspace, 0.2), 0 0 0 3px colors.$color-ocean-light;
}
&:focus::-moz-range-thumb {
background-color: colors.$color-snow;
border-color: colors.$color-ocean;
box-shadow: 0 0 0 inset rgba(colors.$color-cyberspace, 0.2), 0 1px 2px rgba(colors.$color-cyberspace, 0.2), 0 0 0 3px colors.$color-ocean-light;
}
@include bem.m(no-preview) {
& + output {
display: none;
}
}
@include bem.e(value){
background-color: colors.$color-concrete;
padding: func.rhythm(0.5) func.rhythm(1);
position: absolute;
border-radius: var.$border-radius;
left: 50%;
transform: translateX(-50%) translateY(calc(100% + 8px));
font-size: var.$size-medium;
&::after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(colors.$color-concrete, 0);
border-bottom-color: colors.$color-concrete;
border-width: 4px;
margin-left: -4px;
}
}
}
@include mixin.atom(range-input) {
position: absolute;
top: 0;
right: 0;
z-index: 0;
width: func.rhythm(5);
}
const ranges = document.querySelectorAll('.js-range-wrapper');
function setValue(range, rangeValue, rangeInput) {
const val = range.value;
const min = range.min ? range.min : 0;
const max = range.max ? range.max : 100;
const newVal = Number(((val - min) * 100) / (max - min));
rangeValue.innerHTML = val;
if (rangeInput) {
rangeInput.value = val;
}
// Sorta magic numbers based on size of the native UI thumb
rangeValue.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
}
ranges.forEach((wrap) => {
const range = wrap.querySelector('.js-range');
const rangeValue = wrap.querySelector('.js-range-value');
const rangeInput = wrap.querySelector('.js-range-input');
range.addEventListener('input', () => {
setValue(range, rangeValue, rangeInput);
range.focus();
});
if (rangeInput) {
rangeInput.addEventListener('input', () => {
if (rangeInput.value !== '') {
range.value = rangeInput.value;
rangeValue.innerHTML = rangeInput.value;
setValue(range, rangeValue, rangeInput);
}
rangeInput.focus();
});
}
setValue(range, rangeValue, rangeInput);
});
No notes defined.