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.
Code
import { DUISlider } from "david-ui-angular"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, DUISlider], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
Preview
Code
<div class="w-96"> <dui-slider defaultValue="50"></dui-slider> </div>
The Slider
Slider component comes with 3 different sizes, that you can change it using the size
prop.
Preview
Code
<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>
The Slider
Slider component comes with 19 different colors, that you can change it using the color
prop.
Preview
Code
<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>
The following properties are available for dui-slider
Attribute | Type | Description | Default |
---|---|---|---|
color | Color | change slider color | gray |
className | string | Add custom className for slider | '' |
trackClassName | string | Add custom className for slider | '' |
thumbClassName | string | Add custom className for slider | '' |
barClassName | string | Add custom className for slider | '' |
size | boolean | Change slider size | md |
defaultValue | string | number | Default Value for slider | required |
value | string | Value prop for slider | '' |
min | string | Min value prop for slider | text |
max | boolean | Max value slider | false |
step | boolean | Steps for slider | false |