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)'
+ ')'
);
});
});