如何解决如何使滑块填充两个文本框之间的空间
我在两个文本框之间有一个自定义滑块（您可以选择如何在两个选项之间分配10欧元）。现在我的问题是，滑块不会填充这两个框之间的空间，而是保持相同的宽度。我希望宽度是可变的，而不是固定的，因此它可以适应屏幕。我玩了一下，但找不到合适的解决方案。
This is what it looks like so far
我在线收集了大部分代码，而不是自己编写，因此错误可能出在我头上。
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.slidecontainer {
max-width: 100%;
margin: auto;
}
.slider {
-webkit-appearance: none;
max-width: 100%;
height: 10px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="row">
<div class="input-group-prepend">
<span class="input-group-text">10€/0€</span>
</div>
<div class="slidecontainer" align="center">
<input type="range" min="0" max="10" class="slider" id="myRange">
</div>
<div class="input-group-append">
<span class="input-group-text">0€/10€</span>
</div>
</div>
谢谢！
解决方法
将滑块和输入包装在div中，或在row之后添加另一个类名，然后使用flexbox对齐项目。
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.container {
width: 100%;
display: flex;
}
.slidecontainer {
flex-grow: 1;
margin: 0 20px;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="row container">
<div class="input-group-prepend">
<span class="input-group-text">10€/0€</span>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="10" class="slider" id="myRange">
</div>
<div class="input-group-append">
<span class="input-group-text">0€/10€</span>
</div>
</div>
答案比Julius的方法容易得多。基本上只缺少一行（伸缩增长：1）。这可行：
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.slidecontainer {
flex-grow: 1;
margin: auto;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<div class="row">
<div class="input-group-prepend">
<span class="input-group-text">10€/0€</span>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="10" class="slider" id="myRange">
</div>
<div class="input-group-append">
<span class="input-group-text">0€/10€</span>
</div>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
