需要使这个低于范围滑块响应答案

【问题标题】：need to make this below range slider Responsive需要使这个低于范围滑块响应
【发布时间】：2021-01-20 06:11:11
【问题描述】：

我需要使这个范围滑块响应。当我开始在移动版本中使用时，文本会重叠。请帮助我实现这一目标。

我尝试将它添加到 Table responsive 并添加一些响应式 div，但它仍然没有锻炼。

如果有人帮我找出让它响应的方法，那就太好了。您可以在

中看到可执行代码

@import url(https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet);
@import url("https://fonts.googleapis.com/css?family=Dancing+Script");

  

.label-container {
  margin-top: 0.5rem;
  -webkit-flex-basis: 100%;
  display: -webkit-flex;
  -webkit-flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  margin-bottom: 50px;
}

.label-slider {
  color: #3949ab;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.label-slider:nth-child(1) {
  padding-left: 0px;
}

.label-slider:nth-child(2) {
  padding-left: 18px;
}

.label-slider:nth-child(3) {
  padding-left: 34px;
}

.label-slider:nth-child(4) {
  padding-left: 32px;
}

.label-slider:nth-child(5) {
  padding-left: 32px;
}

.slider-container {
  width: 100%;
  margin-top: 5px;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #dde5ff;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

input[type="range"],
input[type="range"]::-moz-range-track {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  border-radius: 5px;
  background: #dde5ff;
  outline: none;
  transition: opacity 0.2s;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #2b8aeb;
  cursor: pointer;
  outline: none;
}

input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1492ea;
  cursor: pointer;
  outline: none;
  z-index: 10;
}

input[type="range"]:focus {
  outline: none;
}

<body>
 
    <p class="title">Range Sliders</p>

    <h4>Range Slider without steps</h4>
    <div class="slider-container">
      <input type="range" min="0" max="4" class="slider">
    </div>

    <div class="label-container">
      <div class="label-slider">None</div>
      <div class="label-slider">1</div>
      <div class="label-slider">2</div>
      <div class="label-slider">3</div>
      <div class="label-slider">4+</div>
    </div>

    
</body>

【问题讨论】：

标签： html css twitter-bootstrap web frontend

【解决方案1】：

只需在容器中将width: 600px 替换为max-width:600px;。

对于字体大小，我建议您根据 rem 设置字体大小。并在您的 html 元素上设置断点 font-size 为您希望的大小。作为本主题：Rem not compatible with media queries?

广告我还会建议您在屏幕一定宽度下移除容器左右填充，这样，比例将与您的输入保持一致。

编辑

为了修复容器标签，我将它们设置为绝对位置。

第一步在容器上添加相对位置：

.label-container{
  position:relative;
}

然后在标签上添加位置：绝对：

.label-slider{
  position: absolute;
}

最后只需使用绝对值正确调整如下：

.label-slider:nth-child(1) {
  left:0;
}

.label-slider:nth-child(2) {
  left:25%;
  transform: translateX(-25%);
  margin-left: 1%;
}

.label-slider:nth-child(3) {
  left:50%;
  transform: translateX(-50%);
  margin-left: .5%;
}

.label-slider:nth-child(4) {
  right: 25%;
  transform: translateX(25%);
  margin-left: 1%;
}

.label-slider:nth-child(5) {
  right:0;
}

演示已满

@import url(https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet);
@import url("https://fonts.googleapis.com/css?family=Dancing+Script");

body {
  font-family: "Catamaran", sans-serif;
  background: #2b8aeb;
}

.container {
  font-family: "Catamaran", sans-serif;
  max-width: 600px;
  margin: 30px auto 0;
  display: block;
  background: #fff;
  padding: 10px 50px 50px;
  border-radius: 4px;
  box-shadow 0 6px 16px rgba(0,0,0,0.15)
}

.title {
  text-align: center;
  font-family: "Dancing Script", cursive;
  color: #3949ab;
  font-size: 35px;
}

.label-container {
  margin-top: 0.5rem;
  -webkit-flex-basis: 100%;
  display: -webkit-flex;
  -webkit-flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  margin-bottom: 50px;
  position : relative;
}

.label-slider {
  color: #3949ab;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  position: absolute;
}

.label-slider:nth-child(1) {
  left:0;
}

.label-slider:nth-child(2) {
  left:25%;
  transform: translateX(-25%);
  margin-left: 1%;
}

.label-slider:nth-child(3) {
  left:50%;
  transform: translateX(-50%);
  margin-left: .5%;
}

.label-slider:nth-child(4) {
  right: 25%;
  transform: translateX(25%);
  margin-left: 1%;
}

.label-slider:nth-child(5) {
  right:0;
}

.slider-container {
  width: 100%;
  margin-top: 5px;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #dde5ff;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

input[type="range"],
input[type="range"]::-moz-range-track {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  border-radius: 5px;
  background: #dde5ff;
  outline: none;
  transition: opacity 0.2s;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #2b8aeb;
  cursor: pointer;
  outline: none;
}

input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1492ea;
  cursor: pointer;
  outline: none;
  z-index: 10;
}

input[type="range"]:focus {
  outline: none;
}

.ticks {
   font-family: "Catamaran", sans-serif;
  color: #3949ab;
  font-size: 14px;
  font-weight: 700;
    display: flex;
    justify-content: space-between;
    height: 6px;
    margin: 0 10px 0 15px;
    counter-reset: count -1;
}
.ticks > div {
  height: 100%;
  width: 1px;
  background: silver;
  counter-increment: count 1;
}
.ticks > div:nth-child(5n - 4) {
  height: 200%;
}
.ticks > div:nth-child(5n - 4)::before {
  display: block;
  content: counter(count,decimal);
  transform: translate(-50%, 100%);
  text-align: center;
  width: 16px;
}

<body>
  <div class="container">
    <p class="title">Range Sliders</p>

    <h4>Range Slider without steps</h4>
    <div class="slider-container">
      <input type="range" min="0" max="4" class="slider">
    </div>

    <div class="label-container">
      <div class="label-slider">None</div>
      <div class="label-slider">1</div>
      <div class="label-slider">2</div>
      <div class="label-slider">3</div>
      <div class="label-slider">4+</div>
    </div>

     

  </div>
</body>

【讨论】：

非常抱歉我没有在我的代码中添加

...在这种情况下请帮我解决
没有添加，我只是说你应该使用媒体查询在一定屏幕宽度下将左右填充删除到容器中
@shivachowdary 只需删除左边的填充，就像我在两个演示中所做的那样
但数字与步骤不一致。这就是我遇到问题的地方。
非常感谢您的帮助..它按预期工作