<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>
	{{#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"
}
  • Content:
    @charset 'UTF-8';
    
    @include atom(range) {
    	-webkit-appearance: none;
    	appearance: none;
    	background: transparent;
    	cursor: pointer;
    	width: 100%;
    	position: relative;
    
    	&::-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;
    		box-shadow: none !important;
    
    		& + 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 m(no-preview) {
    		& + output {
    			display: none;
    		}
    	}
    
    	@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;
    		}
    	}
    }
    
    @include atom(range-input) {
    	position: absolute;
    	top: 0;
    	right: 0;
    	z-index: 0;
    	width: rhythm(5);
    }
    
    
  • URL: /components/raw/range/_range.scss
  • Filesystem Path: src/atoms/range/_range.scss
  • Size: 2.4 KB
  • Content:
    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);
    });
    
  • URL: /components/raw/range/range.js
  • Filesystem Path: src/atoms/range/range.js
  • Size: 1.1 KB

No notes defined.