Tengo una entrada de rango, por defecto, su centro es 50 puntos de 100. Necesito 20 puntos en el centro, pero dejo un máximo de 100. ¿Cómo hacerlo? ( ejemplo de imagen )
Esto depende totalmente de usted. El rango de entrada real será lineal, pero la forma en que su código interpreta el valor que obtiene está bajo su control.
Así que establezca el rango en la entrada en min 0 y max 100. Pero cuando obtenga el valor en Javascript, lo interpretará como desee.
La curva más simple que puede ajustar a los valores (x1, y1), (x2, y2), (x3, y3) es una parábola: y1 = a x1 x1 + b*x1 + c; y así
Resolviendo estas tres ecuaciones simultáneas para tus puntos (0, 0), (50, 20), (100, 100) obtenemos: a=3/250; b=-0,2; c=0;
function getValue(v) { document.querySelector('#value').innerHTML = 3 / 250 * v * v - 0.2 * v; } getValue(document.querySelector('input').value); <input type="range" min=0 max=100 onchange="getValue(this.value);"> <div>The calculated value is <span id="value"></span></div>