How can I customize the color of the Bootstrap range slider using a Hex code?

Is it possible to change the default blue color of a Bootstrap range slider? I have tried modifying it in this Fiddle, but I would prefer to change it to a Hex color like red. Can CSS be used to achieve this?

Below is my HTML code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

    <!--  Age Range Slider  -->
    <div class="col">
      <div class="card mb-3" style="max-width: 21rem;">
        <div class="card-body text-center">
          <div class="d-flex flex-column">
            <label for="age_slider" class="form-label"> Age</label>
            <input class="slider" name="age_slider" id="age_slider" type="range" value="30" max="100" min="1" oninput="this.nextElementSibling.value = this.value">
            <output>30</output>
          </div>
        </div>
      </div>
    </div>

My question has been linked to another similar one found here. However, the solution provided there did not work for me either.

htmlcssbootstrap-4

Answer №1

Utilize the following attributes:

.slider {
  -webkit-appearance: none;
  width: 100;
  margin: 50px auto;
  height: 8px;
  border-radius: 4px;
  margin-bottom: 15px;
  background-color: yellow;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 10px;
  background-color: red;
  overflow: visible;
  cursor: pointer;
}

Nevertheless, their functionality is limited.

Answer №2

Safari

.slider::-webkit-slider-runnable-track {
  background-color: #bbb;
}

.slider::-webkit-slider-thumb {
  background-color: #222222;
}

Edge

.slider::-ms-track {
  background-color: #dddddd;
}

.slider::-ms-thumb {
  background-color: #444444;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Responsive menu not functioning properly with jQuery

I am currently working on a website located at . My goal is to incorporate the navigation plugin called MeanMenu into the site. I have followed all the instructions provided in the tutorial: adding the jQuery script to my HTML, including the CSS in the hea ...

jqueryhtmlcss

Are there any resources available for optimizing performance on iOS and Android browsers?

Being a web developer means considering the Android and iOS web browsers, which have their own rendering engines and limitations in power and memory. This can pose many complications. Therefore, I'm curious if there is a detailed guide available for ...

javascriptandroidhtmlioscss

Creating flexible items with a 1:1 ratio and ensuring that the padding on the left and right of the flex container remains consistent

Whenever I adjust the size of the window, https://i.sstatic.net/Fm3d1.png the flex-container ends up with uneven padding on the left and right, which is less than ideal. So, I am looking for a way to allow the flex-item to resize when the window size c ...

javascripthtmlcssreactjsflexbox

Checkbox: Activate button upon checkbox being selected

On my webpage, I have a modal window with 2 checkboxes. I want to enable the send button and change the background color (gray if disabled, red if enabled) when both checkboxes are selected. How can I achieve this effectively? HTML: <form action="" me ...

javascriptjqueryhtml

Creating personalized buttons with Bootstrap

I'm looking to create custom buttons using Bootstrap. The "Get Quote" button should have a magnifying glass symbol on its left, and the "Clear" button should have a symbol on its left as well, like shown in the image below. Additionally, I want to cha ...

htmlcssbootstrap-4

Retrieving data from a database using twig

In my PHP code, I currently have the following: $vals['followers'][] = R::find('follow', 'following_id=?', array($_GET['id'])); This code returns all followers in the "follow" table with a following_id that matche ...

phphtmlarraystwig

I'm missing out on that gray background

input your code hereI am working with the following html/php code snippet: <div class="footerbottom"> <span class="footermenuitem"> <span class="footermenutitle">PRODUCTS</span> <?php $menu = menu_navigation_links('menu-pro ...

phphtmlcsscss-floatbackground-color

Changing a number from 0 to 1 in a field using AngularJS (HTML5)

It's strange behavior. I am using an input field with the type set to number. When I enter 1230, the model value remains as 1230. However, when I type 01, it becomes 1. Even though I can see 01 in the input value, there seems to be something relate ...

javascriptangularjshtml

Revamping HTML Label 'for' with JavaScript: Unveiling Effective Techniques

I'm facing an issue with changing the target of a label that is associated with a checkbox using JavaScript. Here's the code I have: <input type="checkbox" id="greatId" name="greatId"> <label id="checkLabel" for="greatId">Check Box&l ...

javascripthtmllabel

Form with input fields arranged horizontally

I am working on an HTML form that is currently arranged vertically, but I am struggling to figure out how to place two text fields on the same line. Specifically, I would like to have the First Name and Last Name fields next to each other on one line rat ...

htmlcssforms

Tips on preventing form submission when clicking on another button within the same form

I created a shopping cart page with functionality to adjust the quantity using JavaScript. I have shared some of the HTML code below, <form action="payment.php" method="post"> <div class="qty__amount"> ...

javascriptphphtmlformstextinput

Column div being obscured by footer

My footer is causing overlap issues with the div above it on my mobile website. Here's a visual representation: Current view on my phone: https://i.stack.imgur.com/RpvWM.png Desired view: https://i.stack.imgur.com/KHVcm.png The code for the are ...

htmlcss

label bootstrap circular navigation

/* ========================================================================== 7. How It Works Section ========================================================================== */ .how-it-works { background: #f5f5fa; padding-bottom: 30px; } .board{ ...

htmlcsstwitter-bootstrap-3bootstrap-4

Throttle user input before making an HTTP request

Currently, I have set up a 2-way binding for the input to appRequestParams.appName. The fetchApps() method is called on every keyup event. My goal is to debounce the input so that backend HTTP requests are not triggered immediately upon every keyup. I ha ...

htmlangulartypescript

A div element with a z-index of 9 remaining below another element with a z-index of 1

Even with a higher z-index, my <h4> and <a> elements are not visible above the background. <section class="no-padding main-slider mobile-height wow fadeIn"> <div class="swiper-full-screen swiper-container height-100 width-100 whit ...

htmlcss

Color picker can be utilized as an HTML input element by following these steps

After trying out various color pickers, I was not satisfied with their performance until I stumbled upon Spectrum - The No Hassle jQuery Colorpicker. It perfectly met my requirements. <html> <head> <meta http-equiv="content-type" content="t ...

javascriptphpjqueryhtmlcss

Revise the content within the table cell

Running the following code using server push: $('tr[name=' + device + ']').find("td[id='status']").text('STARTED'); When attempting to access the element's id, it returns the correct value. $('tr[name=& ...

javascriptjqueryhtml

Disabling a jQuery function on an external page: Step-by-step guide

I have encountered a challenge while trying to load an anchor tag on an external page using a specific method: <a href="page.html#div> This method is meant to link me to another page's particular div. <div name="div"> stuff </> H ...

jqueryhtmlhyperlinkanchorautoscroll

Adjusting the alignment of button text in an Angular Kendo grid

I am currently utilizing the grid view feature of Kendo UI for Angular. While I have buttons on the grid, the issue is that the text within the buttons is not centered properly despite applying styles such as text-align:center. Here is the template for my ...

cssangularkendo-ui

Ensure that the Bootstrap form validation checks for both an empty field and a valid URL

I'm currently working on validating a form field in Bootstrap 4.4. The goal is to not only check if the field is filled out, but also to ensure that it contains a valid URL. This URL can be an internal link, a hostname, or an IP address. However, it m ...

javascriptvalidationbootstrap-4