Heartwood

Slider 

<div class="slider-wrapper">
    <div class="text-input__pre">
        <label class="text-input__label" for="">Scale</label>
        <span class="text-input__post-label">100%</span>
    </div> <input type="range" class="slider" id="" name="" min="" max="" value="" step="" style="--min: 0; --max: 100; --val: 50;">
</div>
 
<div class="slider-wrapper">
	{{> @input-pre }}
	<input
		type="range"
		class="slider"
		id="{{ id }}"
		name="{{ name }}"
		min="{{ min }}"
		max="{{ max }}"
		value="{{ value }}"
		step="{{ step }}"
		style="--min: 0; --max: 100; --val: 50;"
	>
</div>
 
{
  "label": "Scale",
  "postLabel": "100%"
}
  • Content: 
    const slider = document.getElementsByClassName('slider');

for (let i = 0; i < slider.length; i++) {
	slider[i].parentNode.classList.add('slider--split-color')
	slider[i].addEventListener('input', e => {
		console.log('slide', e)
		slider[i].style.setProperty('--val', slider[i].value)
	})
}
  • URL: /components/raw/slider/slider.js
  • Filesystem Path: components/02-forms/13-slider/slider.js
  • Size: 291 Bytes
  • Content: 
    const slider = document.getElementsByClassName('slider');

for (let i = 0; i < slider.length; i++) {
	slider[i].parentNode.classList.add('slider--split-color')
	slider[i].addEventListener('input', e => {
		console.log('slide', e)
		slider[i].style.setProperty('--val', slider[i].value)
	})
}
  • URL: /components/raw/slider/slider.js
  • Filesystem Path: components/02-forms/13-slider/slider.js
  • Size: 291 Bytes

Slider

A Slider allows a user to visually input a value that falls within a given range.

Notes:

  • The split-color execution is intended as a progressive enhancement. As such, the slider will only have a single color in older browsers that don’t support CSS variables.

When to use:

Use a Slider when a value must fall within certain range to be acceptable.

When not to use:

  • No minimum and maximum; instead use a Text Input that only accepts numbers
  • User preference; if it’s preferable for a user to type a value in, for example a decimal value that would be difficult to pinpoint on a Slider