davidaurelio

function fearNotLetter(str) {
  let last = str.charCodeAt(0);
  for (let i = 1; i < str.length; ++i) {
    const code = str.charCodeAt(i);
    if (code !== last + 1) return String.fromCharCode(last + 1);
    last = code;
  }
}

davidaurelio

/**
 * Slider with filled track
 */

.slider {
	height: 32px;
	position: relative;
	--fill-start: 0.5;
	--gap: 4px;
	--progress: 0.5;

davidaurelio

/**
 * The first commented line is your dabblet’s title
 */

background-image: linear-gradient(90deg, yellow 25%, transparent 25%, transparent 30%, yellow 30%),
	              linear-gradient(90deg, transparent 15%, gray 15%, gray 25%, transparent 25%, transparent 30%, gray 15%, gray 25%, transparent 30%);
min-height: 100%;

davidaurelio

/**
 * Slider with filled track – gradients
 */

.slider {
	height: 32px;
	position: relative;
	--fill-start: 0.5;
	--gap: 4px;
	--progress: 0.5;

davidaurelio

/**
 * Pixel-perfect scale
 */
 
.frame {
	position: relative;
	margin: 48px;
} 

.rocketship {

davidaurelio

/**
 * Pixel-perfect scale
 */
 
 html {
 	font: 1em sans-serif;
 }
 
 form {
 	user-select: none;