Vue 3 styling

[aBenve]

Hey! Hi, I'm trying to use this beautiful slider but I'm no able to aply styling. I used the posted demo so I could see my styles working but nothing on my project.

Code:

<template>
  <div>
    <Slider v-model="value" :tooltips="false"/>
  </div>
</template>

<script>
import Slider from '@vueform/slider'

export default {
  components: {
    Slider,
  },
  data() {
    return {
      value: 20
    }
  }
}
</script>

<style  src="@vueform/slider/themes/default.css">
:root{
  --slider-connect-bg: #a594fe;
  --slider-bg: #252525;
  --slider-height: 20px;
  --slider-handle-width: 20px;
  --slider-handle-height: 20px;
  --slider-handle-bg: radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(165,148,254,1) 60%);
  --slider-tooltip-bg: #a594fe;

  --slider-handle-ring-width: 3px;
  --slider-handle-ring-color: #a594fe30;
}
</style>

Thanks and sorry for my English.

[maksakoviliya]

Try to do like that:

<style> :root { <...Your variables here...> --slider-bg: #F4F2F1; <...Your variables here...> } </style> <style src="@vueform/slider/themes/default.css"></style>

[aBenve]

Wow it works perfectly now! Thanks for the response!