HTML5 输入范围：允许“min”大于“max”（从到）答案

【问题标题】：HTML5 input range: allow "min" bigger then "max" (from to)HTML5 输入范围：允许“min”大于“max”（从到）
【发布时间】：2015-12-04 18:43:40
【问题描述】：

在<input type="range" /> 上，我需要min=""-值大于max=""-值，
例如值来自 100 到强>0:

<input type="range" min="100" max="0" />

这在某种程度上是可能的吗？用 JavaScript 就好了。

这里是我的意思的演示：

0 to 100: (this is working)
<input type="range" min="0" max="100" step="any" style="width: 100%" 
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

100 to 0: (not working in IE, Edge, Firefox and Chrome*)
<input type="range" min="100" max="0" step="any" style="width: 100%"
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

100 to 0: hack
<input type="range" min="0" max="100" step="any" style="width: 100%; direction: rtl;"
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

<div id="test"></div>

我基本上想要一个 from - to 滑块，而不是 min - max

编辑：我不希望这种情况发生：（滑块颜色也会翻转）这由我的示例 direction: rtl; 以及 transform: scaleX(-1); 和 transform: rotate(180deg); 完成。

【问题讨论】：

不可能有小于0但大于100的数字，只需反转显示的值即可。
另外我想知道为什么有人会否决这个问题..
本机不支持此功能。
不要担心投反对票，大多数人投反对票是因为他们不理解这个问题，这几天发生了很多:)
我会为你投票，这是个好问题。

标签： javascript html input

【解决方案1】：

要回答您的问题，在不主要破解输入的情况下，不可能使最小值高于最大值或包含 from 或 to 属性

只需确保您使用的最终数字是 100 减去您的滑块大小。

我还将添加一个隐藏的输入，并更新该输入的值——因为您将使用此方法弄乱滑块的实际 value。

0 to 100: (this is working)
<input type="range" min="0" max="100" step="any" style="width: 100%" 
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

100 to 0: (not working in IE, Edge, Firefox and Chrome*)
<input type="range" min="0" max="100" step="any" style="width: 100%"
       oninput="document.getElementById('test').innerHTML = 100 - parseInt(this.value)" 
       onchange="document.getElementById('test').innerHTML = 100 - parseInt(this.value); document.getElementById('slider-value').value = 100 - parseInt(this.value)" />
<br />
Hidden input <input type="text" id="slider-value">
<div id="test"></div>

编辑 2：w3 https://www.w3.org/wiki/HTML/Elements/input/range 有此概述，不幸的是，范围输入没有您需要的属性。如果您需要进行定制输入，则可以作弊。有趣的是，我做了一个基于范围的输入，在一定程度上可以接受鼠标滚轮事件，但看看我如何隐藏输入并用另一个界面替换它可能会很有用：http://codepen.io/EightArmsHQ/pen/CfmeE

【讨论】：

我知道，从数学上讲，在处理输出时是可能的。但是信息框也会出错，等等
我的 sn-p 中的信息框工作正常，并且（我不想说显而易见的）你实际上不能有最小值 100 和最大值 0。除非你的整个网页也颠倒显示；）
信息框是指显示在滑块位置的小框，显示滑块的当前值（在某些浏览器中），然后是 ofc。然后是反转的
啊，我在 Chrome 中看不到这个框。
是的，我想将滑块用作“范围”，其原因不是最小值和最大值，而是 from 和 to 值。

【解决方案2】：

保持min 和max 的值相同，但将其旋转180 度。或者你可以申请scaleX(-1)水平翻转。

#flip {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg);
} 

#flip {
    -ms-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1);
}

0 to 100: (this is working)
<input type="range" min="0" max="100" step="any" style="width: 100%" 
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

100 to 0: (not working in IE, Edge, Firefox and Chrome*)
<input id="flip" type="range" min="0" max="100" step="any" style="width: 100%"1
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

<div id="test"></div>

【讨论】：

感谢您的好回答。它也无助于解决我的问题，我相信它会对未来的读者有所帮助。

【解决方案3】：

四种不同的方法，每一种都有轻微的怪癖。

你可以通过direction: rtl改变方向，但它会改变滑动条在IE中突出显示的部分使用#fixed1::-ms-fill-lower { background-color: transparent; } 删除突出显示。
您可以通过transform: scaleX(-1) 水平翻转滑块，但这会使 Firefox 中指针的阴影位于错误的一侧。
您可以通过transform: rotate(180deg) 旋转滑块，但在Firefox 中会使指针倒置。
您可以使用 100-x hack，但滑块上的工具提示显示的值不正确。

我可能会使用direction: rtl，如果可能的话，如果突出显示让您感到困扰，您会看到删除IE中的样式。

#fixed1 { direction: rtl}
#fixed2 { transform: scaleX(-1); }
#fixed3 { transform: rotate(180deg); }

/* IE fixes */
#fixed1::-ms-fill-upper {
    background-color: rgba(54, 153, 201, 1);
}
#fixed1::-ms-fill-lower {
    background-color: transparent;
}
#fixed2::-moz-range-thumb {
  transform: scaleX(-1);
}
#fixed3::-moz-range-thumb {
  transform: rotate(180deg);
}

0 to 100: (this is working)
<input type="range" min="0" max="100" step="any" style="width: 100%" 
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

100 to 0: rtl (highlighted part different in IE)
<input id='fixed1' type="range" min="0" max="100" step="any" style="width: 100%"
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />
100 to 0: flip (shading on wrong side in firefox)
<input id='fixed2' type="range" min="0" max="100" step="any" style="width: 100%"
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />
100 to 0: rotate (pointer upside down in firefox)
<input id='fixed3' type="range" min="0" max="100" step="any" style="width: 100%"
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />
100 to 0: hack (tooltip is wrong)
<input type="range" min="0" max="100" step="any" style="width: 100%;"
       oninput="document.getElementById('test').innerHTML = 100 - this.value" 
       onchange="document.getElementById('test').innerHTML = 100 - this.value" />
<br />

<div id="test"></div>

【讨论】：

感谢您的好回答。它也无助于解决我的问题，我相信它会对未来的读者有所帮助。
您可以使用 ::-ms-fill-upper 和 ::-ms-fill-lower 为 IE 交换颜色，这应该可以解决大部分问题 direction:rtl。我希望做更多的事情可能会破坏为某些元素提供本机 UI 的移动浏览器。

【解决方案4】：

我找到了另一种没有我担心的副作用的方法：

它统一了所有浏览器中滑块的外观，否则就大不相同了。（但元素值总是从 0 到 1）

function sliderOutput(percentage, from, to) {
  document.getElementById('test').innerHTML = fromTo(percentage, from, to)
}

function fromTo(percentage, from, to) {
  return from + (to - from) * percentage
}

input[type="range"] {
    width: 150px; /* default diffrent in every Browser */
    height: 20px; /* default diffrent in every Browser */
    background-color: lightgray; /* default transparent or white in FireFox */
    margin: 0; /* Edge and Chrome */
    padding: 0; /* IE and FireFox */
    outline: none; /* Chrome */
    -webkit-appearance: none; /* Chrome fix */
}

    input[type="range"]::-moz-range-track {
        border: inherit;
        background: transparent;
    }

    input[type="range"]::-ms-track {
        border: inherit;
        color: transparent;
        background: transparent;
    }

    input[type="range"]::-ms-fill-lower,
    input[type="range"]::-ms-fill-upper {
        display: none;
    }

    input[type="range"]::-ms-tooltip {
        display: none;
    }

    /* Thumb-Classes can not be merged */

    input[type="range"]::-webkit-slider-thumb {
        width: 30px;
        height: 20px;
        border: none;
        background-color: gray;
        -webkit-appearance: none; /* Chrome fix */
    }

    input[type="range"]::-moz-range-thumb {
        width: 30px;
        height: 20px;
        border: none;
        border-radius: 0;
        background-color: gray;
    }

    input[type="range"]::-ms-thumb {
        width: 30px;
        height: 20px;
        border: 0; /* IE */
        background-color: gray;
    }

0 to 100:
<input type="range" min="0" max="1" step="any" step="any"
        oninput="sliderOutput(this.value, 0, 100)"
        onchange="sliderOutput(this.value, 0, 100)" />
<br />
100 to 0:
<input type="range" min="0" max="1" step="any" step="any"
        oninput="sliderOutput(this.value, 100, 0)"
        onchange="sliderOutput(this.value, 100, 0)" />
<br />
<br />
Value: <span id="test"></span>

【讨论】：