Tailwind CSS Slider with Angular

Use our Tailwind CSS Slider component in your web projects. The Slider can be used for adjusting settings such as volume, brightness, or applying image filters.

See below our beautiful Slider example that you can use in your Tailwind CSS and Angular project. The example also comes in different styles and colors so you can adapt it easily to your needs.

You first need to import the DUISlider Module into your application module.

    
import { DUISlider } from "david-ui-angular";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, DUISlider],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
    
<div class="w-96">
<dui-slider defaultValue="50"></dui-slider>
</div>

Slider Size

The Slider Slider component comes with 3 different sizes, that you can change it using the size prop.

    
<div class="flex w-96 flex-col gap-8Í">
<dui-slider size="sm" defaultValue="50"></dui-slider>
<dui-slider size="md" defaultValue="50"></dui-slider>
<dui-slider size="lg" defaultValue="50"></dui-slider>
</div>

Slider Colors

The Slider Slider component comes with 19 different colors, that you can change it using the color prop.

    
<div class="flex w-96 flex-col gap-8">
<dui-slider color="blue" defaultValue="50"></dui-slider>
<dui-slider color="red" defaultValue="50"></dui-slider>
<dui-slider color="green" defaultValue="50"></dui-slider>
<dui-slider color="yellow" defaultValue="50"></dui-slider>
</div>

lider Properties

The following properties are available for dui-slider component. These are the custom properties that we've added for the slider component and you can use all the other native properties as well.

AttributeType Description Default
colorColorchange slider colorgray
classNamestringAdd custom className for slider''
trackClassNamestringAdd custom className for slider''
thumbClassNamestringAdd custom className for slider''
barClassNamestringAdd custom className for slider''
sizebooleanChange slider sizemd
defaultValuestring | numberDefault Value for sliderrequired
valuestringValue prop for slider''
minstringMin value prop for slidertext
maxbooleanMax value sliderfalse
stepbooleanSteps for slider false

Type - Size

    
type size = 'md' | 'lg';

Type - Color

    
type colors =
| "blue-gray"
| "gray"
| "brown"
| "deep-orange"
| "orange"
| "amber"
| "yellow"
| "lime"
| "light-green"
| "green"
| "teal"
| "cyan"
| "light-blue"
| "blue"
| "indigo"
| "deep-purple"
| "purple"
| "pink"
| "red";