将文字放在范围滑块内

时间：2019-03-25 13:23:09

标签： html css

我是CSS的新手，尽管我不确定要从哪个类开始，但这个问题可能很容易回答。

我的目标是将文本恰好适合范围滑块 我正在使用公共范围滑块示例：

let app = (() => {

  function updateSlider(element) {
    if (element) {
      let parent = element.parentElement,
      lastValue = parent.getAttribute('data-slider-value');

      if (lastValue === element.value) {
        return; // No value change, no need to update then
      }

      parent.setAttribute('data-slider-value', element.value);
      let $thumb = parent.querySelector('.range-slider__thumb'),
      $bar = parent.querySelector('.range-slider__bar'),
      pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);

      $thumb.style.bottom = `${pct}%`;
      $bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
      $thumb.textContent = `${element.value}%`;
    }
  }
  return {
    updateSlider: updateSlider };


})();

(function initAndSetupTheSliders() {
  const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
  inputs.forEach(input => input.setAttribute('value', '50'));
  inputs.forEach(input => app.updateSlider(input));
  // Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
  inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
  inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
.range-slider {
  
  position: relative;
  text-align: center;
  height: 300px;
  max-height: 100%;
  margin-top: 15%;
  /*margin-bottom: 5vh;*/
}
/*.range-slider:before {
  position: absolute;
  top: -2em;
  //left: .5em;
  content: attr(data-slider-value) "%";
  color: red;
  font-size: 25px;
}*/
.range-slider__thumb {
  position: absolute;
  left: 32%;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-weight: bold;
  background: white;
  color: black;
  background: url('../../../assets/images/button_round_dark.png');
  font-size: 80%;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
  border-radius: 50%;
  pointer-events: none;
  z-index:999;
  
  // position: absolute;
  // left: 42%;
  // width: 30px;
  // height: 30px;
  // line-height: 30px;
  // background: white;
  // color: black;
  // font-size: 50%;
  // font-size: 80%;
  // box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
  // border-radius: 50%;
  // pointer-events: none;
  // z-index:999;
}
.range-slider__thumb_start{
    position: absolute;
    left: 33%;
    width: 45px;
    height: 45px;
    line-height: 30px;
    background: white;
    color: black;
    background: url('../../../assets/images/button_round_dark.png');
    font-size: 60%;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
    border-radius: 50%;
    pointer-events: none;
    z-index:99;
    bottom: 0px;
}
.range-slider__bar {
  left: 42%;
  bottom: 0;
  position: absolute;
  background: linear-gradient(to bottom, #c00000 0%, #ffe200 100%);
  pointer-events: none;
  width: 20px;
  border-radius: 10px;
}
.range-slider input[type=range][orient=vertical] {
  position: relative;
  margin: 0;
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
  border: none;
  background: orangered;
  width: 18px;
  border-color: #B94F1B;
  border-radius: 10px;
  //box-shadow: 0 0 0 20px rgba(96, 96, 96, 0.1);
  
  //-webkit-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
  //-moz-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
  box-shadow: 0px 20px 0px 40px rgba(96, 96, 96, 0.1);
  
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
  border: none;
  background: white;
  width: 18px;
  border-color: #343440;
  border-radius: 10px;
  //box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
  border: none;
  background: white;
  width: 18px;
  border-color: #343440;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #3D3D4A;
  color: transparent;
  height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower, .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .range-slider input[type=range][orient=vertical]::-ms-tooltip {
  display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
  width: 30px;
  height: 30px;
  opacity: 0;
}

.range-slider-text{

  font-size: 1rem;
  color: red;
  text-transform: uppercase;
  letter-spacing: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: -30px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;

}
<div class="range-slider" id="range_slider">
    <input type="range" orient="vertical" id="desire" name="desire" min="{{min}}" max="{{max}}" />
    <div class="range-slider__bar"></div>
    <div class="range-slider-text">Header Two</div>
    <div class="range-slider__thumb"></div>
    
    <div class="bubble" id="me" style="display: none">slide to provide your feedback</div>
    <!-- <div class="range-slider__thumb_start"></div> -->

    <div class="range-slider__line"></div>

</div>
我不熟悉CSS，并且有一个可能很容易回答的问题，尽管我不确定从哪个类开始。

我的目标是将文本恰好适合范围滑块 我正在使用公共范围滑块示例： 喜欢 enter image description here

1 个答案:

答案 0 :(得分：1)

我只是通过很少的 CSS 和 HTML 更改来更新您的代码，希望对您有所帮助。谢谢

在display: flex;中添加justify-content: center;，align-items: center和.range-slider__bar CSS 。

.range-slider__bar {
  left: 42%;
  bottom: 0;
  position: absolute;
  background: linear-gradient(to bottom, #c00000 0%, #ffe200 100%);
  pointer-events: none;
  width: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

此外，添加slider-text CSS。

.slider-text {
    transform: rotate(-90deg);
    white-space: nowrap;
}

在 HTML 中，我只需在您的<div class="slider-text">My Desire</div>内添加<div class="range-slider__bar">。

let app = (() => {

  function updateSlider(element) {
    if (element) {
      let parent = element.parentElement,
      lastValue = parent.getAttribute('data-slider-value');

      if (lastValue === element.value) {
        return; // No value change, no need to update then
      }

      parent.setAttribute('data-slider-value', element.value);
      let $thumb = parent.querySelector('.range-slider__thumb'),
      $bar = parent.querySelector('.range-slider__bar'),
      pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);

      $thumb.style.bottom = `${pct}%`;
      $bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
      $thumb.textContent = `${element.value}%`;
    }
  }
  return {
    updateSlider: updateSlider };


})();

(function initAndSetupTheSliders() {
  const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
  inputs.forEach(input => input.setAttribute('value', '50'));
  inputs.forEach(input => app.updateSlider(input));
  // Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
  inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
  inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
.range-slider {
  
  position: relative;
  text-align: center;
  height: 300px;
  max-height: 100%;
  margin-top: 15%;
  /*margin-bottom: 5vh;*/
}
/*.range-slider:before {
  position: absolute;
  top: -2em;
  //left: .5em;
  content: attr(data-slider-value) "%";
  color: red;
  font-size: 25px;
}*/
.range-slider__thumb {
  position: absolute;
  left: 32%;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-weight: bold;
  background: white;
  color: black;
  background: url('../../../assets/images/button_round_dark.png');
  font-size: 80%;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
  border-radius: 50%;
  pointer-events: none;
  z-index:999;
  
  // position: absolute;
  // left: 42%;
  // width: 30px;
  // height: 30px;
  // line-height: 30px;
  // background: white;
  // color: black;
  // font-size: 50%;
  // font-size: 80%;
  // box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
  // border-radius: 50%;
  // pointer-events: none;
  // z-index:999;
}
.range-slider__thumb_start{
    position: absolute;
    left: 33%;
    width: 45px;
    height: 45px;
    line-height: 30px;
    background: white;
    color: black;
    background: url('../../../assets/images/button_round_dark.png');
    font-size: 60%;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
    border-radius: 50%;
    pointer-events: none;
    z-index:99;
    bottom: 0px;
}
.range-slider__bar {
  left: 42%;
  bottom: 0;
  position: absolute;
  background: linear-gradient(to bottom, #c00000 0%, #ffe200 100%);
  pointer-events: none;
  width: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-text {
    transform: rotate(-90deg);
    white-space: nowrap;
}

.range-slider input[type=range][orient=vertical] {
  position: relative;
  margin: 0;
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
  border: none;
  background: orangered;
  width: 18px;
  border-color: #B94F1B;
  border-radius: 10px;
  //box-shadow: 0 0 0 20px rgba(96, 96, 96, 0.1);
  
  //-webkit-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
  //-moz-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
  box-shadow: 0px 20px 0px 40px rgba(96, 96, 96, 0.1);
  
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
  border: none;
  background: white;
  width: 18px;
  border-color: #343440;
  border-radius: 10px;
  //box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
  border: none;
  background: white;
  width: 18px;
  border-color: #343440;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #3D3D4A;
  color: transparent;
  height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower, .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .range-slider input[type=range][orient=vertical]::-ms-tooltip {
  display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
  width: 30px;
  height: 30px;
  opacity: 0;
}

.range-slider-text{

  font-size: 1rem;
  color: red;
  text-transform: uppercase;
  letter-spacing: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: -30px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;

}
<div class="range-slider" id="range_slider">
    <input type="range" orient="vertical" id="desire" name="desire" min="{{min}}" max="{{max}}" />
    <div class="range-slider__bar">
      <div class="slider-text">My Desire</div>
    </div>
    <div class="range-slider-text">Header Two</div>
    <div class="range-slider__thumb"></div>
    
    <div class="bubble" id="me" style="display: none">slide to provide your feedback</div>
    <!-- <div class="range-slider__thumb_start"></div> -->    

    <div class="range-slider__line"></div>

</div>

相关问题
最新问题