在HTML和JavaScript中添加两种不同类型的滑块

最初，我的代码中已经有一种类型的滑块用于打开/关闭我的设备，我希望添加另一个范围滑块以改变打开时间的持续时间，但当我这样做时，我的所有滑块都会转到范围滑块，是否有其他方法可以这样做，因为我同时使用HTML和JavaScript获取用户输入，并让设备相应地进行操作

这是我的滑块代码：

开关{
位置：相对位置；
显示：内联块；
宽度：100px；
高度：34px；
}
.开关输入{
显示：无；
}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景颜色：绿色；
}
输入：焦点+.滑块{
长方体阴影：0 1px绿色；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（66px）；
-ms变换：translateX（66px）；
转化：translateX（66px）；
}
.按钮{
背景色：#4CAF50；
/*绿色的*/
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
宽度：200；
}
/*
这是我想添加的另一个滑块：
*/
.slidecontainer{
宽度：100%；
}
.滑块{
-webkit外观：无；
宽度：100%；
高度：15px；
边界半径：5px；
背景#d3；
大纲：无；
不透明度：0.7；
-webkit转换：.2s；
转变：不透明度；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：25px；
高度：25px；
边界半径：50%；
背景#4CAF50；
光标：指针；
}
.滑块：：-moz范围拇指{
宽度：25px；
高度：25px；
边界半径：50%；
背景#4CAF50；
光标：指针；
}

端口1
时间：

您可以这样做来显示滑块。如果选中“第一个”，则需要查看css

功能变更可见性（e）{
如果（例如，选中目标）{
document.getElementById（“仅显示”）.style.visibility=“可见”
}否则{
document.getElementById（“onlyShowIfYes”）.style.visibility=“hidden”
}
}
document.getElementById（“检查”）.onchange=changeVisibility
变更可见性（{target:{checked:false}}）

开关{
位置：相对位置；
显示：内联块；
宽度：100px；
高度：34px；
}
.开关输入{
显示：无；
}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景颜色：绿色；
}
输入：焦点+.滑块{
长方体阴影：0 1px绿色；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（66px）；
-ms变换：translateX（66px）；
转化：translateX（66px）；
}
.按钮{
背景色：#4CAF50；
/*绿色的*/
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
宽度：200；
}
/*
这是我想添加的另一个滑块：
*/
.slidecontainer{
宽度：100%；
}
.滑块{
-webkit外观：无；
宽度：100%；
高度：15px；
边界半径：5px；
背景#d3；
大纲：无；
不透明度：0.7；
-webkit转换：.2s；
转变：不透明度；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：25px；
高度：25px；
边界半径：50%；
背景#4CAF50；
光标：指针；
}
.滑块：：-moz范围拇指{
宽度：25px；
高度：25px；
边界半径：50%；
背景#4CAF50；
光标：指针；
}

端口1
时间：

能否提供您所做的工作，以便我们搜索问题的来源请注意，我已经添加了一些代码片段，请查看。添加您尝试的JavaScript，如果这是您想要修复的。“在这里我想叫它”-你到底会怎么做，或者你尝试过什么？请注意您也遇到了语法问题。您好，我执行了此代码段，但我的问题仍然是一样的，两个滑块都变得相似（相反，两个滑块分配的格式不同），并且在“检查”之前我需要滑块端口。@Mandeep.m您提供的HTML中只有一个滑块。我有另一种形式的滑块来打开/关闭端口，我在这段代码中前进了一步，决定使用默认范围滑块。但是我的滑块现在倾向于在按下提交按钮之前提交所有输入（可能提交按钮不起作用）我希望在设置范围后提交