/home/henzagold/site/components/ Current File: //home/henzagold/site/components/RangeSlider.vue
<template>
  <div :id="uniqueId"></div>
</template>

<script>
export default {
  name: "RangeSlider",
  props: {
    uniqueId:{
      type:String,
      default:'noui_range_slider_'+Date.now(),
      required:true
    },
    min: {
      type: [String, Number],
      required:false,
      default:1,
      /*validator: function (value) {
        console.log("inside validator: " + value);
        return parseFloat(value);
      }*/
    },
    max: {
      type: [String, Number],
      required:false,
      default:1,
      /*validator: function (value) {
        console.log("inside validator: " + value);
        return parseFloat(value);
      }*/
    },
    start: {
      type: [String, Number],
      required:false,
      default:undefined,
      /*validator: function (value) {
        console.log("inside validator: " + value);
        return parseFloat(value);
      }*/
    },
    end: {
      type: [String, Number],
      required:false,
      default:undefined,
     /* validator: function (value) {
        console.log("inside validator: " + value);
        return parseFloat(value);
      }*/
    },
    step: {
      type: [String, Number],
      required:false,
      default:1,
      /*validator: function (value) {
        console.log("inside validator: " + value);
        return parseFloat(value);
      }*/
    },
    labelType: {
      type: String,
      required:false,
      default:"number"
    },
    value:{
      type:Array,
      required:false,
    },
  },
  data(){
    return{

    }
  },
  methods:{
    priceFormat(){
      let mythis=this;
      return {
        to: function (value) {
          return mythis.price(value.toFixed(0));
        },
        from: function (value) {
          return value;
        }
      }
    },
    Init(){
      //console.log("dfsdfsdf",this.min);
      let mythis=this;
      let slider =document.getElementById(this.uniqueId);
      noUiSlider.create(slider, {
        start: [this.start || this.min ,this.end || this.max],
        //snap: true,
        tooltips: [ this.labelType=="price" ? this.priceFormat() : true ,this.labelType=="price" ? this.priceFormat() : true ],
        //tooltips: true,
        connect: true,
        step: this.step,
        range: {
          'min': this.min,
          'max': this.max
        },
        //format:this.priceFormat()
       /* format: {
          // 'to' the formatted value. Receives a number.
          to: function (value) {
            //console.log(typeof )
            return parseFloat(value);//value.toFixed();
          },
          // 'from' the formatted value.
          // Receives a string, should return a number.
          from: function (value) {
            return value;
          }
        }*/
      });
      mythis.$emit('input',[this.min,this.max]);
      slider.noUiSlider.on('update',function (){
        mythis.$emit('input',slider.noUiSlider.get());
      });
    },
    priceUnit(value){
      return  this.price(value)+ ' تومان ' ;
    },
    price(value){
      if (value) {
        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }
      return value;
    }
  },
  mounted() {
    this.Init();
  },
  updated() {
    //this.Init();
  },
}
</script>

<style >
.noUi-connect{
  background: var(--secondary-color) !important;
}
</style>