Question

我使用的输入范围的值允许从0到100。我需要使用以下规则将滑块中的值映射到输入文本：

      range => text
          0 => 2000
        100 =>  200

相应值之间。目前我使用的是以下脚本，但是我想知道：

如何将值从输入文本转换为范围（相反），例如，当用户输入2000时，slider设置为0，其值介于两者之间：

text => range
2000 => 0
200  => 100

如果与我的代码相比有更好的方法

＆＃13;

var slider = document.querySelector('#slider');
var result = document.querySelector('#result');
slider.addEventListener('change', function(event) {
  var sliderValue = event.target.value;
  var maxValue = 2000;
  var coef = 18;
  var calc;
  calc = maxValue - (sliderValue * coef);
  result.value = calc;
});

＆＃13;

<input id="slider" type="range" name="points" min="0" max="100" value=0>
<input id="result" type="text" name="result">

＆＃13;

Answer 1

<script>
function r2t (r) {
  return ( 2000 + r * (200-2000) / 100 );
}

function t2r (t) {
  return ((t - 2000) * 100) / (200 - 2000);
}
</script>

<div onclick="alert(r2t(0))">r2t(0)</div>
<div onclick="alert(r2t(1))">r2t(1)</div>
<div onclick="alert(r2t(100))">r2t(100)</div>
<div onclick="alert(r2t(200))">r2t(200)</div>
---
<div onclick="alert(t2r(0))">t2r(0)</div>
<div onclick="alert(t2r(200))">t2r(200)</div>
<div onclick="alert(t2r(2000))">t2r(2000)</div>

Answer 2

我创建了一个values remap utility，可以帮助您完成任务。

您可以在下面看到一个工作示例，它可以双向工作，这意味着您可以使用滑块更新您的值或在输入中输入其他值。它适用于正值和负值，您还可以定义自定义范围（如果滑块与100的步长不同，这可能很有用。）

＆＃13;

      (function () {
            /*
                Custom remap utility for values.
                Use case: Assigning custom values to a range slider.
                The HTML example shows how to map a range slider (range from 0% to 100%)
                to custom values and vice versa:
                slider <-> input
                    0% <->  2000
                  100% <->   200
            */
            let mapAToB = (value, mapMin, mapMax, range) => {
                let coef = (mapMax - mapMin) / range,
                    result = mapMin + (value * coef);
                return result;
            };
            let mapBToA = (value, mapMin, mapMax, range) => {
                let coef = (mapMax - mapMin) / range,
                    result = (value - mapMin) / coef;
                return result;
            };
            console.clear();
            let printOutTests = (message, mapMin, mapMax, range) => {
                console.log(message + ':-----------------------------');
                for (let v = 0, len = range; v <= len; v++) {
                    let value = mapAToB(v, mapMin, mapMax, range);
                    let step = mapBToA(value, mapMin, mapMax, range);
                    console.log(step, value);
                }
            };

            // tests
            //printOutTests('ex1a', 0, 1000, 100);
            //printOutTests('ex1b', 1000, 0, 100);

            //printOutTests('ex2a', 200, 2000, 100);
            //printOutTests('ex2b', 2000, 200, 100);

            //printOutTests('ex3a', -1000, 1000, 100);
            //printOutTests('ex3b', 1000, -1000, 100);

            //printOutTests('ex4a', -100, 100, 10);
            //printOutTests('ex4b', 100, -100, 10);

            //printOutTests('ex5a', 0, 1, 100);
            //printOutTests('ex5b', 1, 0, 100);

            document.addEventListener('DOMContentLoaded', function (event) {
                // configurations
                const SLIDER_MIN = 0,
                      SLIDER_MAX = 100,
                      MAP_START = 2000,
                      MAP_END = 200,
                      MAP_RANGE = 100;

                let slider = document.querySelector('#slider'),
                    sliderPercentageStart = document.querySelector('#slider-percentage-start'),
                    sliderPercentageEnd = document.querySelector('#slider-percentage-end'),
                    sliderMapStart = document.querySelector('#slider-map-start'),
                    sliderMapEnd = document.querySelector('#slider-map-end'),
                    input = document.querySelector('#input');

                slider.min = SLIDER_MIN;
                slider.max = SLIDER_MAX;

                sliderPercentageStart.innerHTML = 'slider min:' + SLIDER_MIN;
                sliderPercentageEnd.innerHTML = 'slider max:' + SLIDER_MAX;

                sliderMapStart.innerHTML = 'map range start:' + MAP_START;
                sliderMapEnd.innerHTML = 'map range end:' + MAP_END;

                slider.addEventListener('change', (event) => {
                    let sliderValue = Number(event.target.value),
                        inputValue = mapAToB(sliderValue, MAP_START, MAP_END, MAP_RANGE);
                    input.value = inputValue;
                });
                input.addEventListener('change', (event) => {
                    let inputValue = Number(event.target.value),
                        sliderValue = mapBToA(inputValue, MAP_START, MAP_END, MAP_RANGE);
                    slider.value = sliderValue;
                });
            });
        })();

＆＃13;

    <div id="slider-percentage-start"></div>
    <div id="slider-percentage-end"></div>
    <div id="slider-map-start"></div>
    <div id="slider-map-end"></div>
    <input id="slider" type="range" name="slider">
    <input id="input" type="text" name="input">

＆＃13;

重新输入HTML输入范围的值

2 个答案: