Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Form Range


May I Know Why the Form Range is Not Filled with color like default before of range ? if i need to fill that how can i do that


user
Rakul Agn 2 years ago
React
5 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

user
Lauris Stepanovs Author 2 years ago

Hi,

Thank you for reaching out to us.

Could you please provide us with more info about what you are trying to achieve?

Regards,
Lauris Stepanovs,
Keenthemes Support Team


user
Rakul Agn 2 years ago

What i am asking for the accent color for the range upto where the slider pointer is dragged this is the default behaviour for the input range thats what i am looking.


user
Lauris Stepanovs Author 2 years ago

Hi,

If you are using HTML default input range and you want to change accent color you can use accent-color CSS property.

.accent {

   accent-color: var(--bs-success);

}

<input type="range" class="accent">


Regards,
Lauris Stepanovs,
Keenthemes Support Team


user
Rakul Agn 2 years ago

Hey i am using metronic input range the class which is contain form-range - want to update on that


user
Lauris Stepanovs Author 2 years ago

Hi,

You can update form range input color in src/_metronic/assets/sass/core/components/_variables.scss.


$form-range-track-border-radius:                    $border-radius !default;

$form-range-track-bg:                               var(--#{$prefix}gray-300) !default;

$form-range-thumb-disabled-bg:                      var(--#{$prefix}gray-500) !default;


Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(