Email templatesOver 4000 IconsDocumentation
Sponsor project
  • Getting started
    IntroductionBrowser SupportCustomize TablerDownloadFAQ
  • Base
    ColorsnewTypography
  • Layout
    Page layoutsnewPage headers
  • Components
    AlertsAutosizeAvatarsBadgesBreadcrumbButtonsCardsCarouselChartsDatagridDividerDropdownsDropzoneEmptyIconsInline PlayerModalsPlaceholderPopoverProgressProgress backgroundRange sliderRibbonsSpinnersStatusesStepsSwitch iconTablesTabsTimelinesTinymceToastsTooltipsTracking
  • Forms
    Base elementsFieldsetColor checkImage checkSelectboxValidationInput maskForm helpers
  • Plugins
    FlagsPayments
  • Utilities
    BordersCursorsInteractions
  • Tabler Icons
    IntroductionnewSVG versionReact pluginPreact pluginVue pluginSolidJS pluginSvelte pluginFigma pluginPNG versionPDF versionEPS versionWebfont version
Components

Range slider

To be able to use the range slider in your application you will need to install the nouislider dependency with npm install nouislider.

All options and features can be found here.

Basic range slider

<div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
<p demo-slider="slider0"></p>

That’s only the basic features and options of range slider. More possibilities can be found here.

Consider becoming a GitHub Sponsor to support Tabler development and sustainability!
Support the project
Components
Progress background
Components
Ribbons
Our products
  • UI Kit
  • 4026 open source icons
  • Email templates
Support
  • Documentation
  • Support
  • Guides
  • Status
  • License
Tabler
  • About
  • Testimonials
  • FAQ
  • Releases
  • Github
Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!
©codecalm.net
Terms of servicePrivacy policy
Made with in Poland.