js+css实现塑料圆圈滑块取值器拖动数值显示效果代码-html代码-BFW代码库

js+css实现塑料圆圈滑块取值器拖动数值显示效果代码

代码语言：html

所属分类：拖放

代码描述：js+css实现塑料圆圈滑块取值器拖动数值显示效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
body {
  height: 100vh;
  margin: 0;
  background: lightblue;
  display: flex;
  align-items: center;
}

form {
  width: 100%;
  padding: 30px;
  display: flex;
  align-items: stretch;
  
}

input, output {
  -webkit-appearance: none;
  box-sizing: content-box;
  margin: 0;
  padding: 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  border: none;
  box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.2), -2px -2px 3px 1px rgba(255, 255, 255, 0.6);
}

input[type=range] {
  width: 100%;
  cursor: pointer;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  position:relative;
  top:-18px;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 12px solid #ffbf00;
  border-radius: 50%;
  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><radialGradient id="radial" cx="0.47" cy="0.47" r="0.69"><stop offset="0.4" stop-color="%23ffbf00" /><stop offset="0.7" stop-color="%23ffe000" stop-opacity="0.75" /><stop offset="1" stop-color="%23ffbf00" /></radialGradient><circle r="16" cx="22" cy="22" filter="url(%23big)" style="fill:none;stroke:url(%23radial);stroke-width:12" /></svg>') 27.2% fill;
}

input[type=range]::-moz-range-thumb {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 12px solid transparent;
  border-radius: 50%;
  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><radialGradient id="radial" cx="0.47" cy="0.47" r="0.69"><stop offset="0.4" stop-color="%23ffbf00" .........完整代码请登录后点击上方下载按钮下载查看