Internetstiftelsen Styleguide

Range: Default 

<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";
@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);
}
  • URL: /components/raw/range/_range.scss
  • Filesystem Path: src/atoms/range/_range.scss
  • Size: 3 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.