<div class="field-group js-range-wrapper">
    <label for="value" class="">Värde</label>
    <input type="range" class="a-range 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>
	<input type="range" class="a-range 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"
}
  • Content:
    @charset 'UTF-8';
    
    @include atom(range) {
    	-webkit-appearance: none;
    	appearance: none;
    	background: transparent;
    	cursor: pointer;
    	width: 100%;
    
    	&::-webkit-slider-runnable-track {
    		background-color: $color-concrete;
    		height: rhythm(1);
    		border-radius: $border-radius;
    		border-top: 1px solid lighten($color-granit, 15%);
    	}
    
    	&::-moz-range-track {
    		background-color: $color-concrete;
    		height: rhythm(1);
    		border-radius: $border-radius;
    		border-top: 1px solid $color-granit;
    	}
    
    	&::-webkit-slider-thumb {
    		-webkit-appearance: none;
    		appearance: none;
    		margin-top: -#{rhythm(1.125)};
    		background-color: $color-ash;
    		height: rhythm(3);
    		width: rhythm(1.5);
    		border: 1px solid $color-granit;
    		border-radius: $border-radius;
    	}
    
    	&::-moz-range-thumb {
    		background-color: $color-ash;
    		height: rhythm(3);
    		width: rhythm(1.5);
    		border-radius: 0;
    		border: 0;
    		border: 1px solid $color-granit;
    		border-radius: $border-radius;
    	}
    
    	&:focus {
    		outline: none;
    
    		& + output {
    			background-color: $color-ocean-light;
    
    			&::after {
    				border-bottom-color: $color-ocean-light;
    			}
    		}
    	}
    
    	&:disabled {
    		cursor: not-allowed;
    		opacity: 0.45;
    
    		& + output {
    			cursor: not-allowed;
    			opacity: 0.45;
    		}
    	}
    
    	&:focus::-webkit-slider-thumb {
    		background-color: $color-snow;
    		border-color: $color-ocean;
    		box-shadow: 0 0 0 inset rgba($color-cyberspace, 0.2), 0 1px 2px rgba($color-cyberspace, 0.2), 0 0 0 3px $color-ocean-light;
    	}
    
    	&:focus::-moz-range-thumb {
    		background-color: $color-snow;
    		border-color: $color-ocean;
    		box-shadow: 0 0 0 inset rgba($color-cyberspace, 0.2), 0 1px 2px rgba($color-cyberspace, 0.2), 0 0 0 3px $color-ocean-light;
    	}
    
    	@include e(value){
    		background-color: $color-concrete;
    		padding: rhythm(0.5) rhythm(1);
    		position: absolute;
    		border-radius: $border-radius;
    		left: 50%;
    		transform: translateX(-50%) translateY(calc(100% + 8px));
    		font-size: $size-medium;
    
    		&::after {
    			bottom: 100%;
    			left: 50%;
    			border: solid transparent;
    			content: "";
    			height: 0;
    			width: 0;
    			position: absolute;
    			pointer-events: none;
    			border-color: rgba($color-concrete, 0);
    			border-bottom-color: $color-concrete;
    			border-width: 4px;
    			margin-left: -4px;
    		}
    	}
    }
    
    
  • URL: /components/raw/range/_range.scss
  • Filesystem Path: src/atoms/range/_range.scss
  • Size: 2.2 KB
  • Content:
    const ranges = document.querySelectorAll('.js-range-wrapper');
    function setValue(range, rangeValue) {
    	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;
    
    	// 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');
    
    	range.addEventListener('input', () => {
    		setValue(range, rangeValue);
    		range.focus();
    	});
    
    	setValue(range, rangeValue);
    });
    
  • URL: /components/raw/range/range.js
  • Filesystem Path: src/atoms/range/range.js
  • Size: 699 Bytes

No notes defined.