Loading...

Form Range

Example range

The Example Range uses type="range" to create a slider input, allowing users to select a value within a specified range easily.

Disabled

The Disabled Range example uses type="range" with the disabled attribute to prevent user interaction.

Min and max

The Min and Max Range example uses type="range" with min and max attributes to set the allowed value range.

Steps

The Range with Steps example uses type="range" with the step attribute to define value increments.

Default Slider

The Default Slider example demonstrates a basic noUiSlider implementation for smooth and interactive value selection.

Disabled Slider

The Disabled Slider example shows a noUiSlider that is non-interactive, preventing users from changing the value.

Vertical Slider

The Vertical Slider example demonstrates a noUiSlider with a vertical orientation. You can configure it using orientation: 'vertical'.

Two Handle Slider

The Two Handle Slider example shows a noUiSlider with two handles, allowing users to select a range of values. You can configure it using start: [min, max].

Margin Slider

The Margin Slider example demonstrates a noUiSlider with a minimum gap between handles. You can configure it using margin: 30.

Min Val:

Max Val:

Step Slider

The Step Slider example shows how to create a noUiSlider with fixed step increments. Configure it using step: 10.

RTL Slider

The RTL Slider example demonstrates a right-to-left noUiSlider. Configure it using direction: 'rtl'.

Max Val:

Tooltips Slider

The Tooltips Slider example shows a noUiSlider with tooltips displaying the current value. Enable it using tooltips: true.

Multiple Tyle Range Slider

The Multiple Type Range Slider example demonstrates a noUiSlider with multiple range handles. Configure different ranges using start: [min, max].

Max Val: 20.00

Slider Fit Style

The Slider Fit Style example showcases a noUiSlider with a compact and well-aligned design. Adjust styling using custom CSS for a seamless fit in your layout.

Rounded Slider

The Rounded Slider example shows a noUiSlider with smooth, rounded handles for a modern look.

Square Slider

The Square Slider example displays a noUiSlider with square handles for a sharp and clean design.

Slider Sizes

The Slider Sizes example shows how to adjust the noUiSlider size using classes like .large-slider for a bigger slider.

Soft Limit Slider

The Soft Limit Slider example demonstrates a slider with a soft limit, allowing values to go slightly beyond the set range for flexibility. Configure it using limit: [min, max] in the settings.

Secoundry Slider

The Secondary Slider example showcases a styled slider using the .noUi-target-secondary class for a distinct appearance.

Success Slider

The Success Slider example showcases a styled slider using the .noUi-target-success class for a distinct appearance.

Info Slider

The Info Slider example showcases a styled slider using the .noUi-target-info class for a distinct appearance.

Warning Slider

The Warning Slider example showcases a styled slider using the .noUi-target-warning class for a distinct appearance.

Danger Slider

The Danger Slider example showcases a styled slider using the .noUi-target-danger class for a distinct appearance.

Dark Slider

The Dark Slider example showcases a styled slider using the .noUi-target-danrk class for a distinct appearance.

Preview Settings

Theme Layouts

Defines the admin panel's layout style, allowing you to choose from different design options.

Color Mode

Choose if app's appearance should be light or dark, or follow your computer's settings.

RTL Mode

Toggle between LTR and RTL layouts to support different language directions.

Preset Themes

Choose a preset theme from out theme library.

Sidebar Colors

Sets the sidebar color scheme. Options include light, dark, or gradient styles.

Navbar Positions Options

Sets the navbar position: sticky, static, or hidden.

Navbar Type Options

Sets the navbar style: default, dark, transparent, or glass.

Font Options

Sets the fonts for headings and body text.

Font Size Options

Sets the font size: sm, md, or lg.

Rounded Options

Sets the border radius size: xs, sm, md, lg, or xl.

Container Options

Defines the container style: fluid (full-width) or boxed (fixed width).

Loader Options

Sets the page loader visibility: hidden or visible.