Slider different colors

CSS used in this example

Important! Make sure you target the input[type=range] in a way that it overrules other CSS that determines the background. In this example you see .gravity-theme in the CSS class, replace this with parent classes from your own theme.

body .gform_wrapper.gravity-theme.gwp-demo-form_wrapper .gfield input[type=range] {
  -webkit-appearance: none; /* We first need to hide the slider, so we're sure only our custom CSS is being used. */
  background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0.5, rgb(50, 115, 151)), color-stop(0.5, rgb(197, 197, 197)));
}

/* -webkit is used by Google Chrome and Apple Safari browsers */

/* -webkit-slider-runnable-track represents the "track" (the groove in which the indicator slides) */
input[type=range]::-webkit-slider-runnable-track {
  height: 16px; /* The height of the range slider bar. */
  cursor: pointer; /* What cursor should be shown when hovering the range slider. */
  border: 0.5px solid #000000; /* And a black border of the bar. */
  -webkit-appearance: none;
  color: #13bba4;
}

/* -webkit-slider-thumb represents the "thumb" that the user can move within the "groove" of an <input> of type="range" to alter its numerical value. */
body .gform_wrapper.gravity-theme.gwp-demo-form_wrapper .gfield input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 36px; /* We want a nice, big thumb to select. */
  width: 24px; /* We want a nice, big thumb to select. */
  border-radius: 5px; /* A little bit border-radius to make the thumb look attractive. */
  background: #ddecf5; /* Give the thumb a recognizable GravityWP light blue background. */
  margin-top: -10px; /* Negative margin top for the thumb, dependend on the set height of the thumb and the height of the bar. */
  cursor: pointer;
  border: 0.5px solid #000000; /* Give the thumb a black border. */
}

/* -moz is used by the Mozilla Firefox browser */

input[type=range]::-moz-range-track {
  height: 16px;
  width: 100%;
  //background: #f26522;
  cursor: pointer;
  border: 0.5px solid #000000;
}

input[type=range]::-moz-range-thumb {
  height: 36px;
  width: 24px;
  border-radius: 5px;
  background: #ddecf5;
  cursor: pointer;
  border: 0.5px solid #000000;
}

/* -ms is used by the Internet Explorer browser */

input[type=range]::-ms-track {
  width: 100%;
  height: 24px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 24px 0;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #f26522;
  border-radius: 5px;
  border: 0.5px solid #000000;
}

input[type=range]::-ms-fill-upper {
  background: #f26522;
  border-radius: 5px;
  border: 0.5px solid #000000;
}

input[type=range]::-ms-thumb {
  height: 36px;
  width: 24px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  border: 0.5px solid #000000;
}

input[type=range]:focus::-ms-fill-lower {
  background: #ddecf5;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ddecf5;
}

JavaScript used in this example

jQuery(function($) {
$('input[type="range"]').change(function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') -   $(this).attr('min'));
    
    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #327397), '
                + 'color-stop(' + val + ', #C5C5C5)'
                + ')'
                );
    });
});

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close