Is there any way to make slider's width to 100%?

[dukie66]

How can I set sliders' width to 100%? I have tried to set it like this :width="'100%'" but got a type error cause it was expecting number as a prop.

My workaround: I took a wrapper class and added CSS like this .rangeSlider .vue-histogram-slider-wrapper { width: 100% !important; }

Is there any better way to do it?

[flozdra]

Hello, with your workaround, my histogram does not resize and shifts from the slider.

I managed to set the width to 100% by updating the width (and the key) of the slider at the end of the resize event. You can get the width of the parent with a ref to it and call the clientWidth property.

<div ref="parent">
   <HistogramSlider
      :key="parentWidth"
      :width="parentWidth"
      :bar-height="100"
      :data="data"
   />
</div>

data() {
    return {
      parentWidth: 300,
      resizer: {
        time: null,
        timeout: false,
        delta: 300,
      },
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeEvent)
  },
  mounted() {
    window.addEventListener('resize', this.resizeEvent)
    this.$nextTick().then(() => {
      // Trigger one time to update parentWidth variable
      this.resizeSlider()
    })
  },
  methods: {
    resizeEvent() {
      this.resizer.time = new Date()
      if (this.resizer.timeout === false) {
        this.resizer.timeout = true
        setTimeout(this.resizeEnd, this.resizer.delta)
      }
    },
    resizeEnd() {
      if (new Date() - this.resizer.time < this.resizer.delta) {
        setTimeout(this.resizeEnd, this.resizer.delta)
      } else {
        this.resizer.timeout = false
        this.resizeSlider()
      }
    },
    resizeSlider() {
      if (this.$refs.parent) this.parentWidth = this.$refs.parent.clientWidth - 24  // Remove padding 12px
      else this.parentWidth = 300  // Default value
    },
  },

There may be an easier or shorter way to do this. I hope this helps someone.

End of resize event source : https://stackoverflow.com/questions/5489946/how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-action