css实现带提示的波动/波浪范围range滑块代码-html代码-BFW代码库

css实现带提示的波动/波浪范围range滑块代码

代码语言：html

所属分类：拖放

代码描述：css实现带提示的波动/波浪范围range滑块代码，美化了range，chrome支持

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

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

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


  
  
  
<style>
@property --v {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0%; 
}
@property --val {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0; 
}

label {
  --c: #547980; /* main color */
  width: 90%;
  max-width: 500px;
  anchor-scope: all;
  timeline-scope: --v;
}

input[type="range"] {
  --s: 30px; /* size/height of the slider */
  --t: 45px; /* size of the thumb*/
  --l: 6px; /* line thickness */
  --bg: #ebe8d5; /* there is no real transparency so this need to match the background color */
  /* shape from the generator: https://css-generators.com/wavy-divider/ 
     select top, border-only and make the size equal to 100%
  */
  --p: shape(from 0 50%,curve to 6.25% 45.5% with 4.17% 3%,smooth to 10.42% 93.5%,smooth to 14.58% 73%,smooth to.........完整代码请登录后点击上方下载按钮下载查看