如何创建关闭/打开滑块

Question

所以我看到过这样的事情：

Image

它基本上是一个关/开滑块。我认为你可以使用一个范围，并将最大值设置为2，最小值设置为1，但支持率较低。我怎么能做到这一点？

Answer 1

这里有很多例子 - https://bootsnipp.com/snippets/featured/material-design-switch

解决方案是设置复选框的样式以显示为“开关”，并使用伪选择器根据隐藏的复选框的已检查属性显示开/关。

注意 - 这不是我的解决方案，但我发现在其他项目中有用。 Bootsnipp是一种宝贵的资源，可以为开发者提供大量的示例和片段。 （我对该网站没有信心）

function toggle(state) {
  var el = document.getElementById('someSwitchOptionDefault');
  el.checked =state
  }

.material-switch span:hover {
cursor:pointer}

.material-switch span:first-of-type {
    position:relative; 
    top 100px; 
    left:0
   }
   
 .material-switch span:last-of-type {
    position:relative; 
    top 30px; 
    left:100px
   }
   
   
  .material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    top:10px;
    left:30px;
    width: 40px;  
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: #e60000;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: #e60000;
    left: 20px;
}

<div class="material-switch">
  <span onclick="toggle(false)">Off</span>
  <input id="someSwitchOptionDefault" name="someSwitchOption001" type="checkbox"/>
    <label for="someSwitchOptionDefault" class="label-default"></label>
   <span onclick="toggle(true)">On</span>
</div>