如何使滑块填充两个文本框之间的 space

Question

我在两个文本框之间有一个自定义滑块（您可以选择如何在两个选项之间分配 10 欧元）。现在我的问题是滑块不会填充这两个框之间的 space 但保持相同的宽度。我希望宽度是可变的而不是固定的，以便它适应屏幕。我玩了一下，但找不到合适的解决方案。

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>

谢谢！

Answer 1

将滑块和输入包裹在 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>

Answer 2

答案比 Julius 的方法还要简单。基本上只缺少一行（flex-grow: 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>

如何使滑块填充两个文本框之间的 space

How to make a slider fill the space between two textboxes

html

css

slider