Vue-slider-component: Template not persisting on mobile

[adi518]

I happen to require the exact same template at all times. It seems there's no prop I can pass to make isMobile return false always.

[NightCatSama]

Do you need the event-type prop?

like it:

<vue-slider event-type="mouse"></vue-slider>

[adi518]

Not so self explanatory. I'll check it out. Thanks.

[adi518]

Actually no. I want to keep mobile events, but without altering the tool-tip template. I edited the title to reflect my issue precisely.

[NightCatSama]

I am not very clear what is without altering the tool-tip template.

[adi518]

Your isMobile if/else clause alters the tool-tip template so element with class vue-slider-tooltip is omitted for mobile. I custom styled this element.

https://github.com/NightCatSama/vue-slider-component/blob/master/src/vue2-slider.vue#L4

[NightCatSama]

Yes, the display of the tooltip is currently related only to the tooltip property.

If you want the component to use a different tool-tip template on the desktop and the mobile side, can judge isMoblie to pass different prop.

<vue-slider ref="slider" :tooltip="tooltip"></vue-slider>

export default {
  data () {
    return {
        value: 0,
        tooltip: false
    }
  },
  mounted () {
    this.tooltip = this.$refs.slider.isMobile ? false : 'always'
  }
}

[adi518]

That's not the problem. According to the if/else clause, it goes into Mobile and then looks at isRange. The false of isRange omits <span class="vue-slider-tooltip"...></span>.

[NightCatSama]

isRange does not matter with the tooltip, isRange will only affect the generation of a slider or two sliders.

[adi518]

If isRange is truthy:

<span :class="['vue-slider-tooltip-' + tooltipDirection[1], 'vue-slider-tooltip-wrap']">
  <slot name="tooltip" :value="val[1]" :index="1">
    <span class="vue-slider-tooltip" :style="tooltipStyles[1]">{{ formatter ? formatting(val[1]) : val[1] }}</span>
  </slot>
</span>

Else:

<span :class="['vue-slider-tooltip-' + tooltipDirection, 'vue-slider-tooltip-wrap']">
  <slot name="tooltip" :value="val" :style="tooltipStyles">
    {{ formatter ? formatting(val) : val }}
  </slot>
</span>

[NightCatSama]

Thank you very much for your issue.

I'm sorry, this mistake is due to my carelessness.

Please update to version 2.3.6.