Crear un control deslizante de rango accesible con CSS

El truco de la accesibilidad es usarlo input type="range"y darle forma con CSS en lugar de darse por vencido y reconstruirlo con divs o lo que sea y luego olvidarse de la accesibilidad.

El ejemplo más inteligente utiliza un linear-gradientfondo en ángulo que hace que la entrada parezca un control deslizante de volumen donde izquierda = bajo y derecha = alto.