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

Our Premium add-ons for Gravity Forms

Field to Entries

Create entries based on Checkboxes & Multi Select choices & List Field rows.

Advanced Number Field

Functionality for Number Fields, like rounding or only absolute numbers, fixed point notation, range calculation, custom units like % or m2 & show as slider.

JWT Prefill

Fill forms with data you can trust. Prefill Gravity Forms fields with a secure token instead of links with editable url parameters, so your data is accurate, tamper-proof, and ready to use.

All Entries

All your new Gravity Forms entries in one central place. Stop navigating between multiple forms to find new entries. Get immediate oversight and full control with a powerful, unified dashboard.

See all add-ons

Read tutorials about

How to Create a Public Submission Business Directory in WordPress (Gravity Forms + GravityView)

Build a moderated business directory where users submit listings through a form, admins approve entries, and approved businesses appear in a searchable GravityView directory.

How to Create an Event Workshop Registration + Waitlist System in WordPress

This guide shows how to set up a workshop registration + waitlist system in WordPress: register attendees until capacity is reached, waitlist the rest, approve entries, and auto-promote people when a seat opens using Gravity Forms, Gravity Flow, and GravityView.

Gravity Flow Form Submission Step Tutorial

The Gravity Flow Form Submission step pauses a workflow until another form is submitted, then continues once the handoff is complete. This guide shows how to connect two forms, prefill fields with mapping, send the correct secure link, and troubleshoot the most common “workflow didn’t move” issues.

Gravity Flow Delete an Entry Step Tutorial

The Gravity Flow Delete Entry step lets you trash or permanently remove Gravity Forms entries as part of a workflow. This guide covers the key settings, scheduling options (delay or date-based), and safe testing tips so you can follow retention and privacy rules with confidence.

See all tutorials