base_ui/components/other/noUiSlider.vue

<template>
  <!-- <div id="slider"></div> -->
  <div>
    <div id="price-values " class="price-values">
      <span
        >حداقل :
        <span ref="minPriceValue"
          ><input
            class="min_value"
            type="text"
            v-model="sliderValue[0]"
            @keyup="sendQuery()"
            @keydown="onKeyDown()" /></span
      ></span>
      <span
        >حداکثر :
        <span ref="maxPriceValue"
          ><input
            class="max_value"
            type="text"
            v-model="sliderValue[1]"
            @keyup="sendQuery()"
            @keydown="onKeyDown()" /></span
      ></span>
    </div>
    <div ref="priceSlider" id="slider-round" ></div>
  </div>
</template>

<script>
import noUiSlider from "nouislider";
import "nouislider/dist/nouislider.css";
export default {
  name: "noUiSlider",
  
  
  data() {
    return {
      slider: "",
      sliderValue: [0, 100],
      typingTimer: 0,
      doneTypingInterval: 500,
    };
  },

  

  mounted() {
    this.slider = this.$refs.priceSlider;

    noUiSlider.create(this.slider, {
      start: [0, 100],
      connect: true,
      step: 10,
      range: {
        min: 0,
        max: 50,
      },
      pips: {
        mode: "steps",
        stepped: true,
        density: 4,
      },
    });
    this.slider.noUiSlider.on("update", (values) => {
      this.sliderValue = values.map((value) => parseInt(value)); // تبدیل مقادیر به عدد صحیح
    });
  },
  watch: {
    // sliderValue(newVal){
    //   this.$refs.priceSlider.noUiSlider.set(newVal);
    // }
  },
  
  methods: {
    updateSliderValue() {
      const minInputValue = parseInt(this.sliderValue[0]);
      const maxInputValue = parseInt(this.sliderValue[1]);
      console.log(this.sliderValue);
      if (!isNaN(minInputValue) && !isNaN(maxInputValue)) {
        this.sliderValue = [minInputValue, maxInputValue];
        this.$refs.priceSlider.noUiSlider.set(this.sliderValue);
      }
    },
    sendQuery() {
      clearTimeout(this.typingTimer);
      this.typingTimer = setTimeout(() => {
        this.updateSliderValue();
      }, this.doneTypingInterval);
    },
    onKeyDown() {
      clearTimeout(this.typingTimer);
    },
  },

};
</script>

<style lang="scss">
// .noUi-handle {
//     width: 10px; /* عرض لغزنده */
//     height: 10px; /* ارتفاع لغزنده */
//     background-color: #3498db; /* رنگ پس زمینه لغزنده */
//     border: 2px solid #2980b9; /* حاشیه لغزنده */
//     border-radius: 50%; /* شکل لغزنده (دایره) */
//     cursor: pointer; /* نشانگر موس را تغییر دهید */
// }
// // .noUi-active .noUi-handle {
// //     transform: scale(1.2); /* تغییر اندازه لغزنده در وضعیت فعال */
// //     transition: transform 0.2s ease; /* انیمیشن تغییر اندازه */
// // }
// /* سفارشی‌سازی شکل ظاهری میله */
// .noUi-connect {
//     background: #3498db; /* رنگ پس زمینه میله */
//     height: 8px; /* ارتفاع میله */
//     border-radius: 10px; /* شکل گرد میله */
// }

// /* سفارشی‌سازی شکل ظاهری میله در حالت فعال */


// .min_value {
//   border: none;
// }
.max_value {
  border: none;
}
.min_value {
  border: none; /* حذف تمام حاشیه‌ها و بوردر‌ها */
  border-bottom: 2px solid  #a7a098; /* افزودن بوردر پایین به عنوان حالت پیش‌فرض */
  color: #a7a098;
  /* حالت فوکوس */
  &:focus {
    outline: none; /* حذف نمایش بوردر فوکوس */
  
  }
}
.max_value {
  border: none; /* حذف تمام حاشیه‌ها و بوردر‌ها */
  border-bottom: 2px solid  #a7a098; /* افزودن بوردر پایین به عنوان حالت پیش‌فرض */
  color: #a7a098;
  /* حالت فوکوس */
  &:focus {
    outline: none; /* حذف نمایش بوردر فوکوس */ 
  }
}

.price-values{
  margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    span{
      margin-bottom: 17px;
    }
}


#slider-round {
    height: 10px;
}
 .noUi-connect {
    background: #3498db;
    
}
 .noUi-handle {
  background-color: #3498db;
    height: 18px !important;
    width: 18px !important;
    top: -5px;
    left: -10px !important;
    right: -9px ; /* half the width */
    border-radius: 9px !important;
    cursor: pointer; /* نشانگر موس را تغییر دهید */
}
.noUi-handle::before{
  content: none !important;
}
.noUi-handle::after{
  content: none !important;
}

</style>