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

API Connector

Connect Gravity Forms to External API's: Query the API using form field values and automatically fill other form fields with the API response.

Advanced Merge Tags

This Gravity Forms Add-On adds extra Merge Tag modifiers (and a lot of power). From the most common used functions like capitalize and length to changing date formats.

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.

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

Gravity Forms Zoho CRM Integration: How to Auto-Populate Form Fields by Email

Learn how to auto-populate Gravity Forms from Zoho CRM using GravityWP API Connector. This tutorial shows how to search Zoho Contacts by email and fill form fields with the returned data.

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.

See all tutorials