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

DateTime Field

The GravityWP - DateTime Field add-on adds a dedicated Date/Time field to Gravity Forms so users can enter both a date and a time in a single input.

Entry to Database

Integrates Gravity Forms with internal or external databases, offering flexible mapping of form fields to database columns and real-time synchronization between entries and database rows.

n8n Connector

Connect Gravity Forms to n8n and automate your workflows with secure, flexible, and powerful webhooks. Go beyond simple notifications and build advanced, two-way automations.

Update Multiple Entries

Trigger the update of multiple entries in a target form by submitting an entry in a trigger form.

See all add-ons

Read tutorials about

Gravity Forms Airtable Integration: Create Records From Form Submissions

Learn how to build a Gravity Forms Airtable integration with GravityWP API Connector. Send form submissions to Airtable, create new records automatically, and save the returned Airtable Record ID and response back to Gravity Forms.

Gravity Forms Asana Integration: Create Tasks From Form Submissions

Learn how to connect Gravity Forms to Asana with GravityWP API Connector. This tested workflow creates Asana tasks from form submissions and saves the returned task ID and URL back to Gravity Forms.

Gravity Forms Google Calendar Integration: Create Events From Form Submissions

Connect Gravity Forms to Google Calendar with GravityWP API Connector. Learn how to create calendar events from form submissions, map event details, configure OAuth 2.0, handle time zones, and save the returned Event ID and URL.

Gravity Forms Notion Integration: Create Database Pages Without Zapier

Connect Gravity Forms to Notion without Zapier. This tested tutorial shows how to create Notion database pages from form submissions and save the returned page ID, URL, creation time, and API response.

See all tutorials