js实现自定义滑块HTMLElement自定义组件代码-html代码-BFW代码库

js实现自定义滑块HTMLElement自定义组件代码

代码语言：html

所属分类：拖放

代码描述：js实现自定义滑块HTMLElement自定义组件代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
  
<style>
body {
  display: grid;
  font-family: system-ui, sans-serif;
  margin-inline: auto;
  max-width: 720px;
  row-gap: 1em;
}

h2 {
  border-block: 1px dotted #CCC;
  color: #555;
  font-size: 1em;
  font-weight: 300;
  padding-block: .5ch;
  text-align: center;
}

number-snapper {
	--number-snapper-w: 200cqi;
	--number-snapper-w-xs: 600cqi;
	--number-snapper-w-md: 400cqi;
}
number-snapper [slot="info"] {
	display: block;
	min-height: 3ch;
}
#storage {
	--number-snapper-ff: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
	--number-snapper-indicator-bg: light-dark(hsl(280, 70%, 40%), hsl(280, 60%, 75%));
	--number-snapper-indicator-w: 5px;
	--number-snapper-indicator-h: 3rem;
	--number-snapper-indicator-bdrs: 2px;
	--number-snapper-triangle-bg: light-dark(hsl(280, 70%, 40%), hsl(280, 60%, 75%));
	--number-snapper-triangle-h: 8px;
	--number-snapper-triangle-w: 16px;
	--number-snapper-major-tick-bg: light-dark(hsl(280, 70%, 70%), hsl(280, 40%, 25%));
	--number-snapper-major-tick-w: 3px;
	--number-snapper-major-tick-h: 100%;
	--number-snapper-major-tick-bdrs: 1px;
	--number-snapper-minor-tick-bg: light-dark(hsla(280, 100%, 60%, 0.4), hsla(280, 80%, 70%, 0.5));
	--number-snapper-minor-tick-w: 1px;
	--number-snapper-minor-tick-h: 50%;
	--number-snapper-minor-tick-bdrs: 0;
	--number-snapper-legend-c: light-dark(hsl(280, 70%, 40%), hsl(280, 60%, 75%));
	--number-snapper-legend-fw: 600;
	--number-snapper-legend-fs: 0.75rem;
	--number-snapper-output-c: light-dark(hsl(280, 70%, 40%), hsl(280, 60%, 75%));
}
#temperature::part(scroll-snap) {
	position: relative;
	padding-block-end: 1rem;
}
#temp.........完整代码请登录后点击上方下载按钮下载查看