Vue-slider-component: Slider Issue in Modal

[rvasoya]

It's not sliding inside modal,
But when height chage of browser it's slide to max value automatically.

[rvasoya]

:real-time="true"
Sorry for raising issue it's solved

[NightCatSama]

:real-time="true" is not the best solution.

More solutions can refer to here https://github.com/NightCatSama/vue-slider-component#exceptions

[chaymag]

I had the same problem , could not move the slider but after I added :real-time="true" , I was capable of moving it. The only problem is : the maximum value when the slider first shows is always set at position" 0 " (the two values max and min were both on same position = 0 no matter what the values were. Any idea on how to solve this please?

[NightCatSama]

@chaymag Refer to the solution link above.

[chaymag]

I already did but I still haven't found the solution.

[NightCatSama]

You have to make sure to call refresh after the component is visible.

[chaymag]

Thank you it worked.

[Glideh]

I had this issue too (using a collapse with bootstrap-vue).
Here is how I did for the record:

<b-btn v-b-toggle.filters>Filters</b-btn>
<b-collapse id="filters" @shown="showFilters">
    <!-- ... -->
    <vue-slider ref="amountSlider" v-model="amount"></vue-slider>
</b-collapse>

<script>
export default {
// ...
    methods: showFilters() {
        this.$refs.amountSlider.refhresh();
    }
// ...
}
</script>

[agriboz]

I had this issue too (using a collapse with bootstrap-vue).
Here is how I did for the record:

<b-btn v-b-toggle.filters>Filters</b-btn>
<b-collapse id="filters" @shown="showFilters">
    <!-- ... -->
    <vue-slider ref="amountSlider" v-model="amount"></vue-slider>
</b-collapse>

<script>
export default {
// ...
    methods: showFilters() {
        this.$refs.amountSlider.refresh();
    }
// ...
}
</script>

Fixed typo.