用css和html设置一个背景颜色滑动控制器

HTML代码：

<div class="slider-container">
  <input type="range" min="0" max="360" value="0" class="slider">
</div>

CSS代码：

.slider-container {
  width: 200px;
  margin: 0 auto;
  text-align: center;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(to right, red, orange, yellow, green, blue, purple);
  outline: none;
  opacity: 0.7;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}

解释：

- 使用`<div>`元素作为容器，设置宽度和居中；
- 使用`<input type="range">`元素作为滑动控制器，设置最小值为0，最大值为360，初始值为0，类名为`slider`；
- 设置滑动控制器的样式，包括宽度、高度、圆角、背景渐变、透明度、鼠标悬浮时的渐变过渡效果；
- 使用伪元素`::-webkit-slider-thumb`和`::-moz-range-thumb`设置滑动控制器的滑块样式，包括宽度、高度、圆角、背景颜色和鼠标样式。