如何创建关闭/开启滑块答案

【问题标题】：How to create a off/on slider如何创建关闭/开启滑块
【发布时间】：2018-01-06 21:35:37
【问题描述】：

所以我见过这样的事情：

Image

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

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： jquery html css slider

【解决方案1】：

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

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

注意 - 这不是我的解决方案，而是我发现在其他项目中有用的解决方案。 Bootsnipp 是一种宝贵的资源，可以为开发人员提供大量示例和 sn-ps。（我不隶属于那个网站）

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>

【讨论】：