JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="settings-group">

	<div class="settings-group-title">
		Change Interface Scale
	</div>
	<div class="range-container">
		<input type="range" min="12" max="32" value="16" id="FontSize" step="2"/>
	
	<div id="scaleFactor">1</div>
	<button id="ApplyScale">apply</button>
</div>
</div>



<div class="test"></div>

SCSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}

body {
	padding: 2rem;
	
}
.settings-group {

		margin: 2rem 0;
		
		&-title {
			font-size: 0.75rem;
			font-weight: 900;
	
			text-transform: uppercase;
			letter-spacing: 0.1rem;
			margin-bottom: 0.5rem;
		}
		
		.range-container {
			display: flex;
			align-items: center;
		}
		
		[type="range"] {
			width: 10rem;
			margin: 1rem 0;
		}

}

#scaleFactor {
	padding: 0.5rem;
	border: 0.1rem solid #ccc;
	border-radius: 0.3rem;
	margin: 0 1rem;
	height: 2rem;
	display: flex; align-items: center;
	justify-content: center;
	
	&:after {
		content: 'x';
		display: inline-block;
		margin-left: 0.25rem;
	}
}

#ApplyScale {
	height: 2rem;
	font-size: 1rem;
	padding: 0 0.75rem;
		display: flex; align-items: center;
	justify-content: center;
		border-radius: 0.3rem;
		background: black;
		color: white;
		cursor: pointer;
}

.test {
	width: 10rem;
	height: 10rem;
	background: red;
}


input[type=range] {
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  cursor: pointer;
  box-shadow: 0px 0px 0px 1px #ccc;
  background: #000;
  border-radius: 25px;
  border: 0px solid #000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #000;
  border: 0px solid #000000;
  height: 1rem;
  width: 1rem;
  border-radius: 1rem;
  background: #000;
	box-shadow: 0px 0px 0px 0.25rem #fff, 0px 0px 1rem 0px rgba(0,0,0,0.5);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.25rem;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #000;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #fff;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px...

JavaScript

const slider = document.getElementById('FontSize');
const root = document.documentElement;
const rootSize = parseInt(window.getComputedStyle(root).fontSize);


const scaleFactor = document.getElementById("scaleFactor");
const applyScale = document.getElementById("ApplyScale");


let savedScale = window.localStorage.getItem('scale');
console.log(savedScale);

if (savedScale) {
	scaleFactor.innerHTML = savedScale / rootSize;
	root.style.fontSize = savedScale + "px";
	slider.value = savedScale;
}

applyScale.addEventListener("click", ()=>{
	let uiScale = slider.value;
	root.style.fontSize = uiScale + "px";
	window.localStorage.setItem('scale', uiScale);
});


slider.addEventListener('input', ()=> {
    let size = slider.value;
		let factor = size / rootSize;
    scaleFactor.innerHTML = factor;
});