How to set Slider color and size to custom values?

[Blabter]

Package

v4.x

Description

Currently you can choose color and size of Slider only from set of predefined values:
https://ui.nuxt.com/docs/components/slider#color

How I can set arbitrary color and size to my slider? For example instead of

<USlider color="neutral" size="xl" :default-value="50" />

I want to use something like this:

<USlider color="#fafafa" size="150px" :default-value="50" />

[benjamincanac]

This is not possible as those props depend on your config which you modify using your app.config.ts: https://ui.nuxt.com/docs/components/slider#theme

However you can use the class and ui prop to override with arbitrary values:

<template>
  <USlider :ui="{ range: 'bg-[#fafafa]' }" />
</template>