Vue-slider-component: Vue-slider inside collapsible div with fixed position

[JonataB]

Hi all,
is my first post in github.
I have not a lot experience with vue/js.
I create classic catalog page (ecommerce) with product and a simple div that hold filters.
The div is collapsible but is always rendered when page product is requested.
It works very well if i show always my filter div but if i make it collapsible the
component shows min and max value one over the other.
In a button click i simply switch a boolean variable to attach '.open' css class to filters div.
Indeed if a add in html 'open' to the filter div the vue-slider componet works as expected.

This is my filters.vue component:

<div id="filtersDiv" class="sidebar-filters">
    <a id="btnClose" href="javascript:void(0)" @click="closeFilters" class="hidebtn">&times;</a>    
      <filter-accordion>
        <span slot="header">Price</span>
        <range-filter 
          id="myPriceSlider"
          ref="priceSlider"
          slot="body"
          :min="0"
          :max="1000"
          :interval="5"
          formatter="€{value}"
          min-query-key="minPrice"
          max-query-key="maxPrice"
        />
      </filter-accordion>
  </div>
.sidebar-filters {
  height: 100%;
  width:0;
  position: fixed;
  top: 0;
  left: 0;
}

This is my catalog.vue component:

<filters 
      v-if="filters.collections.length"
      :class="{'open':showFiltersDiv}"
      @close="showFiltersDiv=false"
      :filters="filters"
      :numberProducts="sortedProducts.length"
    />
  <button id="btnOpen" class="btn btn-secondary" @click="showFilters">
    Filters
 </button>

.open {
  width: 50% !important;
  display:inline-block;
}

this is my rangeFilter component

<template>
  <div class="slider">
    <vue-slider
      :value="value"
      :formatter="formatter"
      :min="min"
      :max="max"
      :interval="interval || 1"
      :lazy="true"
      width="90%"
      @callback="filter"
    ></vue-slider>
  </div>
</template>

I do not know how figure out
Can i recive help?
Sorry if i violet something

PS: Sorry for several mistakes during post

[NightCatSama]

Are you using the v2.x version?

[JonataB]

"vue-slider-component": "^2.8.12"
tks a lot for reply
For me is difficult to understand how fix

[NightCatSama]

Is it possible because of this?
https://github.com/NightCatSama/vue-slider-component/tree/v2#exceptions

This exception does not exist in 3.x, it is recommended to upgrade the 3.x version.

[JonataB]

I think yes because in my filter-accordion i have a click event to show/hide the filter and
indeed if i click the component rerender and it works

<template>
  <div class="list-group-item">
    <div :class="{'header': true, 'open':open}" @click="open =!open">
      <slot name="header"></slot>
      <i class="fas fa-chevron-down float-right"></i>
    </div>
    <transition @enter="onEnter" @leave="onLeave">
      <div class="body mt-3 pt-2" v-if="open">
        <slot name="body"></slot>
      </div>
    </transition>
  </div>
</template>

So what is best way to fix
Sorry for english

[NightCatSama]

Upgrade component version, using v3.x.

document: https://nightcatsama.github.io/vue-slider-component/#/

[NightCatSama]

Need to introduce theme style files. document

And two changes.

:formatter => :tooltip-formatter
@callback => @change

[JonataB]

i will try now ... at home :)
But a question: there are some issue with my dependencies?

"dependencies": {
    "@deveodk/vue-toastr": "^1.0.4",
    "axios": "^0.18.0",
    "bootstrap-vue": "^2.0.0-rc.1",
    "chart.js": "^2.8.0",
    "hchs-vue-charts": "^1.2.8",
    "lodash": "^4.17.11",
    "nprogress": "^0.2.0",
    "vee-validate": "^2.2.0",
    "velocity-animate": "^1.5.2",
    "vue-slider-component": "^2.8.12",
    "vuex": "^3.1.0"
  }

[NightCatSama]

Yes, the latest version is v3.0.41.

run

npm install vue-slider-component --save

[NightCatSama]

The correct dependency should be like this:

"vue-slider-component": "^3.0.41"

[JonataB]

It works well in dev and production environment
Tanks you so much
bye