Skip to main content

BOOTSTRAP RANGE

Bootstrap Range helps to customize the range inputs with built-in customization for better look and cross-browser supports.

Use .form-range controls to make fancy range inputs

  • Min - minimum value
  • Max - maximum value
  • Step - interval value
  • Value - Precise value

Min and Max

The range function specifies the default minimum and maximum values are 0 (min) and 100 (max), respectively. To adjust the range, set min and max properties value based on your requirements.

Let's look into an example,

<label class="form-label">Bootstrap Range (Min and Max)</label>

<input type="range" class="form-range" min="0" max="4" id="MinMaxRange1">

Step

The step attribute allows us to adjust the interval values of range input element. The value of step attribute can be "any" or a positive floating-point number. The default value of step is 1.

Value

The value attribute sets the exact value of the range input element, no less or more than a given value.

Disabled

The disabled attribute restricts access to the range control.




Comments

Popular posts from this blog

BOOTSTRAP OPACITY

With Bootstrap Opacity, you can control the opacity level of an element.  Predefined Bootstrap Opacity values are, 100% (opacity-100) 75% (opacity-75) 50% (opacity-50) 25% (opacity-25) 0 (opacity-0) - Completely transparent The Opacity is used to adjust the transparency level (visibility) of an element. Let's look into an example, See the Pen Bootstrap Opacity by Prime Study Hub ( @PrimeStudyHub ) on CodePen .

BOOTSTRAP FLOAT

 Use Bootstrap float utilities to toggle the element to left or right, or disable floating. To toggle an element to the right with .float-end class and left with .float-start class. Example All viewport sizes, .float-start (Float content to left) .float-end (Float content to right) .float-none (Don't float content) See the Pen BOOTSTRAP FLOAT by Prime Study Hub ( @PrimeStudyHub ) on CodePen . Note: Float utilities do not work on flex items Responsive Float Start Float an element to the left depending on your screen size with the responsive float start classes. .float-sm-start - Float content to the left on small screens (SM) or wider  .float-md-start - Float content to the left on medium screens (MD) or wider .float-lg-start - Float content to the left on large screens (LG) or wider .float-xl-start - Float content to the left on extra-large screens (XL) or wider .float-xxl-start - Float content to the left on XXL screens or wider See the Pen BOOTSTRAP R...