Configurator

Want to get a custom Slider design without having to write your own CSS?
Use the Configurator to edit the functionality, Aesthetics, Theme and colors!.

How to use the Configurator

  1. Choose the options for your slider
  2. Customize your slider’s aesthetics
  3. Pick a base slider color theme
  4. …and if you want; change component colors

Once you’re done; there is generated code at the bottom of the page with your slider’s functionality and design ready to copy and paste into your project!

Basic Functional Setup

For most use cases, the config options here will be sufficient to cover your needs.

If you know you need more control than what's available in this simple configurator, skip this step and check out the Options page for more information on all the options available.

Type:

Handles:

Orientation:

Min/Max:

Pips:

Steps:

  • See the Steps documentation for more information.

Float Labels:

Formatters:

Spring:

Push/Drag

Range Gaps:

Limits:

Darkmode:

  • This will add the darkmode prop to the config, but will not affect this configurator display as we will show both light/dark from here on. Learn more about darkmode.

Aesthetics

As a way to help you get a feel for customising the slider's appearance; I've create a few differennt handle styles you can select, and added most of the individual elements as customisable position/size.

For Colors, move on to the next section below aesthetics.

Track Style:

  • 0.5
  • 0
  • 100%

Handle Style:

  • 1

Handle Offset:

  • 0
  • 0

Scroll to the bottom of this page to copy the generated code!

Light / Dark

To help with theme / color setup, from here on we will see both light and dark mode sliders, and you can change the background colors of the slider container, just to help you get a feel for how the slider will finally look.

Background Color:

  • This background color is purely for demonstration purposes while you are configuring the slider. It is to simulate how the slider would look on your website. So you should set these colors to the same values your own website uses.

Colors - Theming

To make changing the style of your slider easy, here's a few different preset themes. Additionally, I've made it so that you can modify the different theme variables to your liking!

For super fine-grained color control, you can use the color variables editor!

Presets

  • Presets are just very simple palette swaps to take the workload off you.

Light Theme:

  • Here's a link to the default palette @ coolors, if you want to edit it!

Dark Theme:

  • And here's the default dark theme palette @ coolors, if you want to edit it!

Scroll to the bottom of this page to copy the generated styles!

Colors - Component Parts

If you want to get more granular control over the colors of the slider, you can use the following CSS variables to control individual parts of the slider. For absolute control (such as border colors, shadows, etc), you'll need to modify the CSS manually. Check out all the different recipes to see what's possible!

Because we're directly modifying the component parts, there's no light/dark mode here. You can still support darkmode by wrapping the css in a @media (prefers-color-scheme: dark) query. See the darkmode docs for more details.

Slider

Handle

  • The colors in the input fields may not match the colours of the slider shown below until edited. This is because the slider inherits colors, which is not really feasible to show in the UI.

Range

  • Range colours typically inherit the colours from the handle. So if you've edited the handle colours above, the input fields may not match the colours of the slider shown below (until edited).

Float

  • Floats also default to inheriting the handle colours, and so they also may appear different until edited.

Pips - Regular

Pips - Selected

Pips - In Range

Pips - Hovered

Pips - Out of Limits

Scroll to the bottom of this page to copy the generated styles!

Generated Code

Now you've configured your slider, you can copy the generated code below to use in your project.

Remember to copy both the Slider code and the CSS styles.

You will probably need to modify the slider props for your framework, if you intend to bind them, or such.