You can style the components with CSS

<script setup>
let value = 2
</script>

<template>
  <it-slider class='red-slider' v-model="value" :max="5" />
</template>

<style scoped>
.red-slider:deep(.it-slider-bar) {
  background: red;
}
</style>

It would be neat if the components used CSS variables for their colours however.

You can style the components with CSS

<script setup>
let value = 2
</script>

<template>
  <it-slider class='red-slider' v-model="value" :max="5" />
</template>

<style scoped>
.red-slider:deep(.it-slider-bar) {
  background: red;
}
</style>

It would be neat if the components used CSS variables for their colours however.

It will be an issue if there is a complex structure so we can use css variables.

.it-slider {
  --progress-color: red;
}

Thanks, it works :)