Currently, I am using the vue-slider component and would like to customize the color of the slider itself. The specific class that needs to be styled is "vue-slider-dot-tooltip-inner".
Below is a screenshot displaying the original CSS styling for vue-slider:
My goal is to modify the border-color and background-color properties as shown in the following code snippet:
.vue-slider-dot-tooltip-inner {
font-size: 14px;
white-space: nowrap;
padding: 2px 5px;
min-width: 20px;
text-align: center;
color: #fff;
border-radius: 5px;
border-color: #FBF6F7;
background-color: #FBF6F7;
box-sizing: content-box;
}
I have attempted to update the CSS within my Vue component template:
Here is my current template:
<div class="slider">
<vue-slider
v-model="value"
:dragOnClick="true"
:adsorb="true"
:marks="data.name"
:included="true"
:data="bar"
:data-value="'id'"
:data-label="'name'"
class="vue-slider-rail"
></vue-slider>
</div>
CSS:
<style lang="scss" scoped>
.vue-slider-dot-tooltip-inner {
font-size: 14px;
white-space: nowrap;
padding: 2px 5px;
min-width: 20px;
text-align: center;
color: #fff;
border-radius: 5px;
border-color: #FBF6F7!important;
background-color: #FBF6F7!important;
box-sizing: content-box;
}
</style>
Despite multiple attempts with different CSS codes, none seem to work. Any assistance in achieving the desired color changes would be greatly appreciated.