Question

<input type="range" />上的

我需要min="" - 值大于max="" - 值，例如值来自 {{ 1}} 转换为 100：

这有可能吗？使用JavaScript会很好。

这是我的意思演示：

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

我基本上想要从 - 到滑块，而不是min - max

编辑：我不希望这种情况发生:(滑块颜色也被翻转）我的示例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>以及direction: rtl;和transform: scaleX(-1);

完成了这项工作

Answer 1

要回答您的问题，不可能使最小值高于最大值，或者包含from或to属性而不会严重侵入输入

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

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

＆＃13;

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>

＆＃13;

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

Answer 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>

Answer 3

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

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

我可能会使用方向：rtl，如果突出显示困难，你会看到如果可能的话，删除IE中的样式。

＆＃13;

#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);
}

＆＃13;

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>

＆＃13;

Answer 4

我发现了另一种方法，没有我担心的副作用：

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

＆＃13;

export excel using "C:\Workbook.xlsx", sheet("File1") firstrow(variables) replace

＆＃13;

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

＆＃13;

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;
    }

＆＃13;

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

4 个答案: