How to make circles repeat in the background of an element in full CSS?

Question

I want to customize a slider like this:

So I was wondering if there was an easy CSS way of doing that, which would adapt to the width of the parent element. Or if I need to add circles in my html and set the color given the percentage.

Here are my two problems that I don't know how to do in full CSS:

• Make circles repeat in the background
• color only circles using some kind of overlay div that would have background: @color

Is any of that possible?

Thanks!

I don't want to use anything with javascript though, my webpages are heavy enough as is :p

Answer 1

You can use a repeated radial gradient to create dots like this:

1. Create a single circle with a radial gradient:

    radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%)
   

2. Place the gradient into a background which is repeated on the x-axis with background-repeat: repeat-x

3. Center the background horizontally with background-position

4. Control the size of the circles with background-size

Example

body {
  margin: 0;
}
div {
  background: radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%);
  background-size: 20px 20px;
  background-repeat: repeat-x;
  background-position: 5px center;
  width: 100vw;
  height: 50px;
}

<div></div>

Create a custom range slider input

You can use <input type="range"> and customise it. It's a little bit messy to work cross-browser.

Example

body {
  margin: 0;
}
input[type=range] {
  -webkit-appearance: none;
  cursor: pointer;
  background: radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%, transparent 100%) 5px center repeat-x;
  background-size: 20px 20px;
  width: 100vw;
  height: 50px;
  outline: 0;
  margin: 0;
  box-sizing: border-box;
}
/*Chrome*/
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 27px;
  width: 15px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
  border-radius: 4px;
  background-size: 100% 17px;
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.5);
  transition: box-shadow .3s;
}
input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.5)
}
/*Firefox*/
input[type=range]::-moz-range-thumb {
  height: 27px;
  width: 15px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
  border-radius: 4px;
  background-size: 100% 17px;
  border: none;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.5);
}
input[type=range]::-moz-range-track {
  background: none;
}
/*IE 11 and Edge*/
input[type=range]::-ms-track {
  color: transparent;
  background: none;
  border: none;
}
input[type=range]::-ms-thumb {
  height: 27px;
  width: 15px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
  border-radius: 4px;
  background-size: 100% 17px;
  border: none;
  margin-top: 3px;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.5);
}
input[type=range]::-ms-fill-lower {
  background: none;
}
input[type=range]::-ms-fill-upper {
  background: none;
}

<input type="range">

A useful blog article on cross-browser range input styling can be found over here.

Answer 2

You could fudge it with a full-stop repeated within a CSS content attribute on the :before and :after selectors.

Crude example: https://jsfiddle.net/xkueyxvb/