Update slider’s width: Vuetify

The tabs are a highly useful UI component in any application and just like that its sub-components i.e text, sliders, etc. too.

This article is gonna cover how to update the tab’s slider’s width with text or with any other condition.

Let’s start by doing some code pieces of stuff.

When we use the tab component, at first the slider’s width is fixed. But if the text which slider is lying on, changes conditionally then you might have faced the issue that the slider’s width doesn’t update with text, something like below-

The slider’s width is not updating with text changes.

All we need to do is, we need to call the slider each and every time the text changes. For instance-

1. Give a reference to the tab, say ref=” tab”
2. Then call the slider, like- this.$refs.tab.callSlider();
3. Use this 2nd code snippet at the time you want to update the slider. It can be any condition, on text change, on page load, etc.

Below is the link to the code pen. Let’s explore the result and the code.

Happy coding.