# Slider

**Path:** Components/Form Inputs

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Slider

 RbSlider allows users to make selections from a range of values which are reflected along a bar.
 They are ideal for adjusting settings such as volume, brightness, or applying image filters.

 Basic Usage

 Simple slider examples demonstrating default behavior with different sizes.

 Show code

 Volume Control

 Brightness

 Temperature

 Volume: 50

 Brightness: 75

 Temperature: 25

 Variants

 Different visual styles including Normal and Filled variants.

 Show code

 Normal Variant (Default)

 Filled Variant

 Filled with Different Colors

 Default

 Warning

 Danger

 Normal: 40

 Filled: 50

 Colors: Success: 60, Warning: 70, Danger: 30

 Sizes

 Available size options: Small, Medium (Default), and Large.

 Show code

 Small Size

 Medium Size (Default)

 Large Size

 Small: 20

 Medium: 50

 Large: 75

 Min & Max

 Control the minimum and maximum values for the slider range.

 Show code

 Range: 0 - 100 (Default)

 Range: 20 - 80

 Range: -1 to 1 (Decimal)

 Range: -100 to 100

 Value 1 (0-100): 50

 Value 2 (20-80): 50

 Value 3 (-1 to 1): -0.75

 Value 4 (-100 to 100): 0

 Step

 Define the increment step for slider values.

 Show code

 Step: 1 (Default)

 Step: 10

 Step: 25

 Step: 0.1 (Decimal)

 Step 1: 45

 Step 10: 70

 Step 25: 50

 Step 0.1: 5.5

 Value Label

 Display the current value as a label on the slider.

 Show code

 Without Value Label (Default)

 With Value Label

 50

 Value Label with Colors

 Success

 65

 Warning

 80

 Without Label: 30

 With Label: 50

 Colored: Success: 65, Warning: 80

 Tick Marks

 Show visual tick marks along the slider track.

 Show code

 Without Tick Marks (Default)

 With Tick Marks

 Without Ticks: 50

 With Ticks: 50

 Sizes: Small: 50, Medium: 50, Large: 50

 Tick Labels

 Add custom labels to tick marks for better context.

 Show code

 Percentage Labels

 0% 
 20% 
 40% 
 60% 
 80% 
 100% 

 Numeric Labels

 0 
 25 
 50 
 75 
 100 

 Custom Text Labels

 Min 
 Low 
 Med 
 High 
 Max 

 Temperature Scale

 Cold 
 Cool 
 Mild 
 Warm 
 Hot 
 Very Hot 

 Percentage: 40%

 Numeric: 50

 Custom Text: 50

 Temperature: 60

 Readonly & Disabled

 Demonstrate disabled and readonly states.

 Show code

 States

 Normal

 Disabled

 Readonly

 Normal: 50

 Disabled: 75

 Readonly: 30

 RTL Support

 Demonstrate slider usage inside an RTL container with Arabic labels.

 Show code

 مستوى الصوت

 60

 درجة الحرارة

 بارد 
 لطيف 
 معتدل 
 دافئ 
 حار 
 شديد 

 40

 ✕

 Contents