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;
}
#temperature::part(scroll-snap)::after {
	content: '';
	position: absolute;
	inset: auto 0 .33rem 0;
	height: 4px;
	background: linear-gradient(to right,
		hsl(240, 100%, 60%) 0%, 
		hsl(220, 100%, 65%) 10%,
		hsl(200, 100%, 60%) 20%,
		hsl(180, 80%, 55%) 30%,
		hsl(160, 70%, 50%) 40%,
		hsl(140, 60%, 50%) 50%,
		hsl(80, 70%, 50%) 60%,
		hsl(40, 90%, 55%) 70%,
		hsl(20, 100%, 55%) 80%,
		hsl(10, 100%, 55%) 90%,
		hsl(0, 100%, 55%) 100%
	);
	border-radius: .33rem;
}
#timeline {
	--number-snapper-ff: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--number-snapper-indicator-bg: light-dark(#8b4513, #b8733f);
	--number-snapper-indicator-bdrs: 5px;
	--number-snapper-indicator-w: 5px;
	--number-snapper-indicator-h: 3rem;
	--number-snapper-triangle-bg: light-dark(#2c1810, #6b4423);
	--number-snapper-triangle-h: 8px;
	--number-snapper-triangle-w: 14px;
	--number-snapper-major-tick-bg: light-dark(#8b4513, #b8733f);
	--number-snapper-major-tick-bdrs: 5px;
	--number-snapper-major-tick-w: 5px;
	--number-snapper-minor-tick-bg: light-dark(#d2b48c, #c9a571);
	--number-snapper-minor-tick-bdrs: 2px;
	--number-snapper-minor-tick-w: 2px;
	--number-snapper-minor-tick-h: 50%;
	--number-snappe.........完整代码请登录后点击上方下载按钮下载查看