bemarket/src/components/market/RangeNumberSlider.vue

<template>
  <div class="range-number-slider">
    <div class="curMinContainer">
      <input
        type="range"
        min="0"
        max="11"
        class="thumb thumbLeft"
        value="0"
      /><span class="minCursor" style="left: 0%">⬢</span
    ><span class="minIndicator" style="left: 0%">0</span>
    </div>
    <div class="curMaxContainer">
      <input
        type="range"
        min="0"
        max="11"
        class="thumb thumbRight"
        value="11"
      /><span class="maxCursor" style="left: 100%">⬢</span
    ><span
      class="maxIndicator atMaxIndicator"
      style="left: 100%"
    >11</span
    >
    </div>
    <div class="slider">
      <div class="sliderTrack"></div>
      <div
        class="sliderRange"
        style="left: 0%; width: 100%"
      ></div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'RangeNumberSlider',
  components: {
  }
})
export default class extends Vue {}
</script>
<style lang="scss" scoped>
.range-number-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 42px;
  width: 96%;
  margin-left: 7px;
}
.range-number-slider .curMinContainer {
  position: absolute;
  width: 100%;
}
.range-number-slider .curMinContainer .thumbLeft{
  z-index: 4;
}
.range-number-slider .curMinContainer .minCursor{
  position: absolute;
  color: #5b39bc;
  transform: translateX(-50%);
  text-align: center;
  font-size: 20px;
  top: -13px;
  z-index: 3;
}
.range-number-slider .curMinContainer .minIndicator{
  position: absolute;
  width: 100%;
  top: 20px;
  color: #dee2e6;
  transform: translateX(-50%);
  text-align: center;
}
.range-number-slider .curMaxContainer {
  position: absolute;
  width: 100%;
}
.range-number-slider .curMaxContainer .thumbRight{
  z-index: 4;
}
.range-number-slider .curMaxContainer .maxCursor{
  position: absolute;
  color: #5b39bc;
  transform: translateX(-50%);
  text-align: center;
  font-size: 20px;
  top: -13px;
  z-index: 3;
}
.range-number-slider .curMaxContainer .maxIndicator{
  position: absolute;
  width: 100%;
  top: 20px;
  color: #dee2e6;
  transform: translateX(-50%);
  text-align: center;
}
.range-number-slider .curMaxContainer .atMaxIndicator {
  transform: translateX(calc(-100% + 5px));
  text-align: right;
}
.range-number-slider .slider{
  position: relative;
  width: 100%;
}
.range-number-slider .slider > * {
  position: absolute;
}
.range-number-slider .slider .sliderRange{
  background-color: #5b39bc;
  z-index: 2;
  border-radius: 3px;
  height: 4px;
}
.range-number-slider .slider .sliderTrack {
  background-color: #382873;
  width: 100%;
  height: 4px;
}

.range-number-slider .thumb {
  position: absolute;
  height: 0;
  width: 100%;
  max-width: 300px;
  outline: none;
  top: -2px;
  left: -2px;
  cursor: pointer;
}

.range-number-slider .overlapped {
  z-index: 4;
}

.range-number-slider .thumb,
.range-number-slider .thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* For Chrome browsers */
.range-number-slider .thumb::-webkit-slider-thumb {
  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 50px;
  width: 20px;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
}

.range-number-slider .thumbLeft::-webkit-slider-thumb {
  transform: translateX(-50%);
}
.range-number-slider .thumbRight::-webkit-slider-thumb {
  transform: translateX(50%);
}

.range-number-slider .thumbLeft::-moz-range-thumb {
  transform: translateX(-50%);
}
.range-number-slider .thumbRight::-moz-range-thumb {
  transform: translateX(50%);
}

/* For Firefox browsers */
.range-number-slider .thumb::-moz-range-thumb {
  background-color: #5b39bc;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 14px;
  width: 14px;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
}
</style>