Designali is becoming Dalim!

I'am creating Designs for the Designers. Clean systems, beautiful interfaces, and thoughtful details — made for you. Visit

Dalim

Getting Started

IntroductionTypography

Backgrounds

Fluid ParticleNewDot PatternGrid PatternFlickering GridRetro GridRippleScroll Progress

Mockups

MacbookMaciPhoneiPadSafari

Texts

Morphing-textNumber CounterGradient TextNew

Components

AccordionAlertAvatarBadgeBannerBookNewBreadcrumbButtonCheckboxDialogDropdownGaugeNewInputNotificationPaginationPopoverRadioSelectSliderSwitchTabTextareaTooltip

Legal

TermsPrivacyContact

DIcons

InstallationHow to useColorSizingStroke WidthFill

DShapes

InstallationHow to useNoiseSizingIndex
Docs
Slider

Slider

Displays a slider or a component that looks like a slider.

slider-01

slider-02

slider-03

slider-04

slider-05

slider-06

5 GB20 GB35 GB

slider-07

0123456789101112

slider-08

25

slider-09

LowHigh

slider-10

LowHigh

slider-11

slider-12

25 - 75

slider-13

25

slider-14

slider-15

slider-16

slider-17

Okay
😡😍

slider-18

😐

slider-19

slider-20

slider-21

slider-22

slider-23

slider-24

slider-25

Object position

slider-26

$
$

slider-27

Equalizer

Installation

pnpm dlx shadcn@latest add "https://designali.in/r/styles/default/slider"

Props

PropTypeDescriptionDefault
variantanyWidth of the dot pattern16
sizeanyHeight of the dot pattern16
classNamestringClass name of the dot pattern-
SelectSwitch

On This Page

  • Installation
  • Props

Contribute

  • Report an issue
  • Request a feature
  • Edit this page
  • About
  • Works
  • Graphic
  • Fonts
  • Agency
  • DIcons
  • Components
  • Blogs
  • Designers
  • Dashboard
  • Contact
  • Terms
© 2025Made with by Ali Imam -Designali
  • FontsNew
  • GraphicNew
  • Components

Not Playing

·

Spotify

·

Ali Imam