Gravity Forms HTML5 Slider CSS generator

You can use this CSS generator for generating code for the GravityWP – Advanced Number Field Add-on for Gravity Forms, with which you can turn any Number Field into a HTML5 Slider.

Track

Color#BFDBEC
26px
Please enter a number from 1 to 50.
13px
Please enter a number from 1 to 25.

fill

Color#327397
1px
Please enter a number from 0 to 20.

fill

fill

Color#CECECE
5px
Please enter a number from 0 to 20.
5px
Please enter a number from 0 to 20.
5px
Please enter a number from 0 to 20.

Thumb

Color#F98C19
26px
Please enter a number from 1 to 50.
40px
Please enter a number from 1 to 50.
13px
Please enter a number from 0 to 25.
Color#212529
1px
Please enter a number from 0 to 25.



Color#858789
2px
Please enter a number from 0 to 25.
2px
Please enter a number from 0 to 25.
7px
Please enter a number from 0 to 25.

Additional settings

Advanced settings
input#example[type=range] {
	height: 53px;
	-webkit-appearance: none;
	width: 100%;
}

input#example[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 26px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 5px 5px 5px 1px #CECECE;
	background: #bfdbec;
	border-radius: 13px;
	border: 1px solid #327397;
}

input#example[type=range]::-webkit-slider-thumb { 
	box-shadow: 2px 2px 7px #858789;
	border: 1px solid #212529; 
	height: 40px;
	width: 26px; 
	border-radius: 13px; 
	background: #f98c19;  
	cursor: pointer;
	-webkit-appearance: none; 
	margin-top: -8px; 
} 

input#example[type=range]:focus::-webkit-slider-runnable-track {
  background: #bfdbec;
}

input#example[type=range]::-moz-range-track {
  width: 100%;
  height: 26px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 5px 5px 5px #CECECE;
  background: #bfdbec;
  border-radius: 13px;
  border: 1px solid #327397;
}

input#example[type=range]::-moz-range-thumb {
  box-shadow: 2px 2px 7px #858789;
  border: 1px solid #212529;
  height: 40px;
  width: 26px;
  border-radius: 13px;
  background: #f98c19;
  cursor: pointer;
}

input#example[type=range]::-ms-track {
  width: 100%;
  height: 26px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input#example[type=range]::-ms-fill-lower {
  background: #bfdbec;
  border: 1px solid #327397;
  border-radius: 26px;
  box-shadow: 5px 5px 5px #CECECE;
}

input#example[type=range]::-ms-fill-upper {
  background: #bfdbec;
  border: 1px solid #327397;
  border-radius: 26px;
  box-shadow: 5px 5px 5px #CECECE;
}

input#example[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 2px 2px 7px #858789;
  border: 1px solid #212529;
  height: 40px;
  width: 26px;
  border-radius: 13px;
  background: #f98c19;
  cursor: pointer;
}

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

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

@media (-ms-high-contrast:none),(-ms-high-contrast:active) {
	input#example[type=range] {
	height: 106px;
	}
}

FAQ

How to use this HTML5 Slider CSS generator for Gravity Forms?

You can use this tool to style your Gravity Forms HTML5 slider. You’ll need to install GravityWP – Advanced Number Field to turn a number field into a slider. In the tool you can style the Track (track color, height, radius), the Track border (color, width), the Track shadow (color, horizontal and vertical offset, blur) and the Thumb (color, width, height, radius), the Thumb border (color, width) and the Thumb shadow (color, horizontal and vertical offset, blur). When you click on the Advanced Number Field button, you can change the CSS to style all or a single Slider in your Gravity Form.

Can I save my HTML5 Slider CSS configuration?

Yes, you can click on the button ‘Save your design’ and it will automatically create a link you can save to come back later and get your styling configuration saved.

Can I change the progress color of my HTML5 Slider?

Yes, you can click on the button ‘Progress color’ to activate this. But be aware: progress color currently only works in the Firefox browser.

Where do I paste my HTML5 slider CSS?

There are different ways you can add custom CSS to your WordPress site or Gravity Form. You can add the CSS in the customizer, it will be available on your whole website. You can also paste it on the page where you embed your form with a Custom HTML field. You need to put the code in between style tags <style></style>. You can also paste the CSS in your theme’s style.css.