How to use bootstrap-slider - 5 common examples

mounted () {
    const props = {}
    for (let key in this.$props) {
      if (this.$props.hasOwnProperty(key)) {
        let propskey = key === 'rangeHighlights' ? key : snakeCase(key)
        props[propskey] = this.$props[key]
      }
    }
    props.enabled = !this.disabled

    this.slider = new Slider(this.$refs.input, props)

    const events = ['slide', 'slideStart', 'slideStop', 'change', 'slideEnabled', 'slideDisabled']
    events.forEach(event => {
      // only bind the event if the event is bound to us
      if (event === 'change' || this._events[event]) {
        this.slider.on(event, (value) => {
          if (this.debounce > 0) {
            const now = new Date().getTime()
            if (this.lastEvent[event] !== null && now <= this.lastEvent[event] + this.debounce) {
              return
            }

            this.lastEvent[event] = now
          }

          this.$emit(event, value)

// date slider
  var sliderDateStart = 1233619200000;
  var sliderDateEnd = Date.now();
  var formatter = (index) => {
    if (index.length = 2)
      return new Date(index[0]).toLocaleString([], {
        day: 'numeric',
        month: 'short',
        year: 'numeric'
      }) + ' - ' + new Date(index[1]).toLocaleString([], {
        day: 'numeric',
        month: 'short',
        year: 'numeric'
      })
  }
  this.dateSlider = new Slider('.date-slider', {
    min: sliderDateStart,
    max: sliderDateEnd,
    step: 86400, // step : 1 day
    value: [sliderDateStart, sliderDateEnd],
    formatter
  });

  //only show the filter on the home page. This method breaks meteor design but its quick and works #yolo
  $('.filterComponent').show();

});

step: this.props.step,
            value: this.props.value,
            orientation: this.props.orientation,
        };
        if(this.props.type == ReactBootstrapSlider.NUMERIC) {
            this.sliderOptions.min = this.props.min;
            this.sliderOptions.max = this.props.max;
            this.sliderOptions.range = true;
        } else {
            this.sliderOptions.min = this.props.min;
            this.sliderOptions.max = this.props.max;
            this.sliderOptions.ticks = [2001, 2002, 2003];
            this.sliderOptions.ticks_labels = ["alpha", "beta", "gamma"];
        }

        this.slider = new BootstrapSlider("#slider", this.sliderOptions);
        this.slider.on("slide", function(event:any) {
                console.log(event);
        });
    }

componentDidMount() {
    this.slider = new BootstrapSlider(this.sliderElement, {
      formatter: this._getTime,
      max: 1,
      min: 0,
      step: 0.0001,
      tooltip: 'show',
      value: 0
    }).on('slideStart', this.slideStart.bind(this))
      .on('slide', this.slide.bind(this))
      .on('slideStop', this.slideStop.bind(this));
    setInterval(() => {
      if (this.sliding) return;
      Player.currentTime().then((currentTime) => {
        this.slider.setValue(currentTime, false, false);
      })
    }, 1000);
  }

mounted() {
    const props = {}
    for (const key in this.$props) {
      if (this.$props.hasOwnProperty(key)) {
        const propskey = key === 'rangeHighlights' ? key : snakeCase(key)
        props[propskey] = this.$props[key]
      }
    }
    props.enabled = !this.disabled

    this.slider = new Slider(this.$refs.input, props)
    this.bindEvents()
  },
  beforeDestroy() {