数字滚动器

下载代码

html

css

分享到微信朋友圈

html

<number-snapper
  id="timeline"
  label="Timeline: 20th Century"
  min="1900"
  max="2000"
  step="1"
  value="1905"
  snap="value"
  ticks="100">
  <small slot="info"></small>
</number-snapper>
<h2>Snaps to value-ticks only ↑</h2>

<number-snapper
  currency="USD"
  format="currency"
  interval="5"
  label="Your monthly salary"
  lang="en-US"
  max="25000"
  min="0"
  snap="all"
  step="500"
  ticks="100"
  value="5000">
  <small slot="info"></small>
</number-snapper>
<h2>Snaps to all ticks ↑</h2>

<number-snapper
  id="temperature"
  format="unit"
  interval="10"
  label="Temperature"
  lang="en-GB"
  snap="major"
  step="10"
  ticks="100"
  unit="celsius"
  value="50">
  <small slot="info"></small>
</number-snapper>
<h2>Snaps to major ticks ↑</h2>

<number-snapper
  id="storage"
  decimals="1"
  format="unit"
  interval="4"
  label="Storage Capacity:"
  lang="en-US"
  max="128" 
  snap="none"
  step="0.25"
  ticks="128"
  unit="gigabyte"
  value="32">
</number-snapper>
<h2>No snap ↑</h2>

css

body {
  display: grid;
  font-family: system-ui, sans-serif;
  margin-inline: auto;
  max-width: 720px;
  row-gap: 1em;background-color: #1F1F1F;
}

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-snapper-legend-c: light-dark(#5d4037, #bc8a7e);
	--number-snapper-legend-fw: 600;
	--number-snapper-legend-fs: 0.875rem;
}

JavaScript

/* FOR THIS DEMO */
const snapper = document.querySelector('number-snapper');
const info = snapper.querySelector('[slot="info"]');

snapper.addEventListener('change', (e) => {
  const annual = e.detail.value * 12;
  info.textContent = `Annual salary: ${new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(annual)}`;
});

const timeline = document.querySelector('#timeline');
const timelineInfo = timeline.querySelector('[slot="info"]');

const events = {
  1900: 'Turn of the century',
  1903: 'Wright Brothers first flight',
  1905: 'Einstein publishes Theory of Relativity',
  1910: 'Mexican Revolution begins',
  1912: 'Titanic sinks',
  1914: 'Start of World War I',
  1915: 'Armenian Genocide begins',
  1917: 'Russian Revolution',
  1918: 'End of World War I',
  1920: 'Women gain right to vote in US',
  1922: 'Discovery of King Tut\'s tomb',
  1925: 'Scopes Monkey Trial',
  1927: 'First transatlantic flight by Lindbergh',
  1929: 'Wall Street Crash, Great Depression begins',
  1930: 'Gandhi\'s Salt March',
  1933: 'Hitler comes to power in Germany',
  1935: 'Social Security Act in US',
  1936: 'Spanish Civil War begins',
  1939: 'Start of World War II',
  1940: 'Battle of Britain',
  1941: 'Attack on Pearl Harbor',
  1945: 'End of World War II, Atomic bombs dropped',
  1947: 'India gains independence',
  1948: 'State of Israel founded',
  1950: 'Korean War begins',
  1953: 'DNA structure discovered',
  1955: 'Montgomery Bus Boycott',
  1957: 'Sputnik launches Space Age',
  1960: 'African independence year',
  1961: 'Berlin Wall erected',
  1963: 'JFK assassination',
  1964: 'Civil Rights Act passed',
  1965: 'Vietnam War escalates',
  1967: 'Six-Day War',
  1968: 'Martin Luther King Jr. assassinated',
  1969: 'Apollo 11 Moon Landing',
  1970: 'Environmental movement grows',
  1973: 'End of Vietnam War',
  1975: 'Fall of Saigon',
  1979: 'Iranian Revolution',
  1980: 'Solidarity movement in Poland',
  1985: 'Gorbachev introduces Glasnost',
  1986: 'Chernobyl disaster',
  1989: 'Fall of the Berlin Wall',
  1990: 'German reunification',
  1991: 'Dissolution of Soviet Union',
  1994: 'End of Apartheid in South Africa',
  1995: 'World Wide Web becomes mainstream',
  1997: 'Hong Kong returned to China',
  1999: 'Euro currency introduced',
  2000: 'Y2K, new millennium begins'
};

// Wait for the custom element to be defined and upgraded
customElements.whenDefined('number-snapper').then(() => {
  timeline.data = events;

// Update the li elements with title attributes
  const timelineTicks = timeline.shadowRoot.querySelectorAll('li[value]');
  timelineTicks.forEach(li => {
    const value = li.getAttribute('value');
    if (events[value]) {
      li.setAttribute('title', events[value]);
    }
  });

timeline.addEventListener('change', (e) => {
    const year = e.detail.value;
    const event = events[year];
    timelineInfo.textContent = event || '';
  });
});

/* WEB COMPONENT */
const styles = new CSSStyleSheet();
styles.replaceSync(`
:host {
	container-type: inline-size;
	display: block;
}
fieldset{
	border: 0;
	display: grid;
	font-family: var(--number-snapper-ff, ui-sans-serif, system-ui);
	margin: 0;
	padding: 0;
	row-gap: var(--number-snapper-rg, 0.875rem);
	text-align: center;
	user-select: none;
}
input {
	background: #0000;
	grid-area: 1 / 1;
	margin: 0;
}
input:focus-visible { outline: none; }
label {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr min-content;
	position: relative;
	row-gap: var(--number-snapper-label-rg, .25rem);
}
label:has(:focus-visible) {
	outline: 1px var(--number-snapper-outline-style, solid) var(--number-snapper-outline-c, #CCC);
	outline-offset: var(--number-snapper-outline-off, 4px);
}
label::after {
	background: var(--number-snapper-indicator-bg, light-dark(#555, #EEE));
	border-radius: var(--number-snapper-indicator-bdrs, 3px);
	content: "";
	display: block;
	grid-area: 1 / 1;
	height: var(--number-snapper-indicator-h, 32px);
	isolation: isolate;
	place-self: center;
	pointer-events: none;
	width: var(--number-snapper-indicator-w, 5px);
}
label::before { 
	background: var(--number-snapper-triangle-bg, light-dark(#555, #EEE));
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	content: "";
	display: block;
	height: var(--number-snapper-triangle-h, 5px);
	place-self: end center;
	pointer-events: none;
	width: var(--number-snapper-triangle-w, 10px);
}
legend {
	color: var(--number-snapper-legend-c, light-dark(#222, #EEE));
	display: contents;
	font-size: var(--number-snapper-legend-fs, 0.875rem);
	font-weight: var(--number-snapper-legend-fw, 400);
}
li {
	background: var(--number-snapper-minor-tick-bg, #CCC);
	border-radius: var(--number-snapper-minor-tick-bdrs, 1px);
	height: var(--number-snapper-minor-tick-h, 70%);
	list-style: none;
	scroll-snap-align: center;
	width: var(--number-snapper-minor-tick-w, 1px);
}
li[title],
:host([interval="2"]) li:nth-of-type(2n+1),
:host([interval="3"]) li:nth-of-type(3n+1),
:host([interval="4"]) li:nth-of-type(4n+1),
:host([interval="5"]) li:nth-of-type(5n+1),
:host([interval="10"]) li:nth-of-type(10n+1) {
	background: var(--number-snapper-major-tick-bg, #CCC);
	border-radius: var(--number-snapper-major-tick-bdrs, 2px);
	height: var(--number-snapper-major-tick-h, 100%);
	width: var(--number-snapper-major-tick-w, 2px);
}
ol { all: unset; }
output {
	color: var(--number-snapper-output-c, light-dark(#222, #EEE));
	font-size: var(--number-snapper-output-fs, 2rem);
	font-variant-numeric: tabular-nums;
	font-weight: var(--number-snapper-output-fw, 600);
	text-box: cap text;
}
[data-scroll] {
	cursor: ew-resize;
	display: block;
	grid-area: 1 / 1 / 1 / 1;
	inset: 0;
	mask: var(--number-snapper-mask, linear-gradient(to right, #0000, #000 15%, #000 85%, #0000));
	overflow-x: auto;
	overscroll-behavior: none;
	position: absolute;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}
[data-scroll].grabbing { cursor: grabbing; }
[data-scroll-bg] {
	display: grid;
	grid-template-columns: 50cqi var(--number-snapper-w, 200cqi) 50cqi;
	height: 100%;
	pointer-events: none;
}
[data-scroll-snap] {
	align-items: end;
	display: flex;
	justify-content: space-between;
	scroll-snap-type: x mandatory;
}
[data-scroll]::-webkit-scrollbar { display: none; }
/* snap-to */
:host([data-snap=none]) [data-scroll-snap] {
	scroll-snap-type: none;
}
:host([snap=none]) li,
:host([snap=value]) li:not([title]),
:host([interval="2"][snap=major]) li:not(:nth-of-type(2n+1)),
:host([interval="3"][snap=major]) li:not(:nth-of-type(3n+1)),
:host([interval="4"][snap=major]) li:not(:nth-of-type(4n+1)),
:host([interval="5"][snap=major]) li:not(:nth-of-type(5n+1)),
:host([interval="10"][snap=major]) li:not(:nth-of-type(10n+1)) {
	scroll-snap-align: none;
}
[type=range],
[type=range]::-webkit-slider-runnable-track,
[type=range]::-webkit-slider-thumb { appearance: none; }
@container (max-width: 400px) { fieldset { --number-snapper-w: var(--number-snapper-w-xs, 600cqi); } }
@container (min-width: 401px) and (max-width: 768px) { fieldset { --number-snapper-w: var(--number-snapper-w-md, 400cqi); } }
@container (min-width: 1400px) { fieldset { --number-snapper-w: var(--number-snapper-w-lg, 100cqi); } }
`);

class NumberSnapper extends HTMLElement {
	#A; #E; #boundOnEnd; #boundOnMove; #isResizing = false; #root; #scrollRange;

constructor() {
		super();
		this.#root = this.attachShadow({ mode: 'open' });
		this.#root.adoptedStyleSheets = [styles];
		this.#boundOnMove = this.#onMove.bind(this);
		this.#boundOnEnd = this.#onEnd.bind(this);
	}

connectedCallback() {
		this.#A = {
			currency: this.getAttribute('currency') || 'USD',
			decimals: this.hasAttribute('decimals') ? parseInt(this.getAttribute('decimals'), 10) : 0,
			format: this.getAttribute('format') || 'integer',
			label: this.getAttribute('label') || '',
			lang: this.getAttribute('lang') || 'en-US',
			max: this.hasAttribute('max') ? parseFloat(this.getAttribute('max')) : 100,
			min: this.hasAttribute('min') ? parseFloat(this.getAttribute('min')) : 0,
			snap: this.getAttribute('snap') || 'none',
			step: this.hasAttribute('step') ? parseFloat(this.getAttribute('step')) : 1,
			ticks: this.hasAttribute('ticks') ? parseInt(this.getAttribute('ticks'), 10) : 10,
			unit: this.getAttribute('unit') || null,
			value: this.hasAttribute('value') ? parseFloat(this.getAttribute('value')) : 0
		};
		this.#A.range = this.#A.max - this.#A.min;
		this.#root.innerHTML = `
		<fieldset>
			<legend>${this.#A.label}</legend>
			<output name="out"></output>
			<label aria-label="${this.#A.label}">
				<input type="range" name="in" min="${this.#A.min}" max="${this.#A.max}" step="${this.#A.step}" value="${this.#A.value}">
				<span data-scroll tabindex="-1">
					<span data-scroll-bg>
						<i></i>
						<ol data-scroll-snap part="scroll-snap">${ Array.from({ length: this.#A.ticks + 1 }).map((_, i) => {
							const tickValue = Math.round(this.#A.min + (i * this.#A.range / this.#A.ticks));
							return `<li value="${tickValue}"></li>`;
						}).join('')}</ol>
						<i></i>
					</span>
				</span>
			</label>
			<slot name="info"></slot>
		</fieldset>`;

this.#E = {
			in: this.#root.querySelector('[name="in"]'),
			out: this.#root.querySelector('[name="out"]'),
			scroll: this.#root.querySelector('[data-scroll]'),
			snap: this.#root.querySelector('[data-scroll-snap]')
		};

this.#scrollRange = this.#E.scroll.scrollWidth - this.#E.scroll.clientWidth;
		new ResizeObserver(() => {
			this.#isResizing = true;
			this.#scrollRange = this.#E.scroll.scrollWidth - this.#E.scroll.clientWidth;
			setTimeout(() => { this.#isResizing = false }, 200);
		}).observe(this.#E.scroll);

this.#E.scroll.addEventListener('pointerdown', this.#onStart.bind(this));
		this.#root.addEventListener('input', () => this.#update());
		this.#E.scroll.addEventListener('scroll', () => this.#update(true));
		this.#update();
	}

#format(num) {
		if (this.#A.format === 'integer') return num;
		const options = {
			style: this.#A.format,
			minimumFractionDigits: this.#A.decimals,
			maximumFractionDigits: this.#A.decimals,
			...(this.#A.format === 'currency' && { currency: this.#A.currency }),
			...(this.#A.format === 'unit' && this.#A.unit && { unit: this.#A.unit }),
		};
		return new Intl.NumberFormat(this.#A.lang, options).format(num).replace(/\u00A0/g, ' ');
	}

#update(fromScroll = false) {
		if (this.#isResizing && fromScroll) return;
		const val = fromScroll
			? this.#A.min + ((this.#E.scroll.scrollLeft / this.#scrollRange) * this.#A.range)
			: parseInt(this.#E.in.value, 10);

const value = Math.round(val / this.#A.step) * this.#A.step;
		const formattedValue = this.#format(value);
		this.#E.out.value = formattedValue;
		this.#E.in.ariaValueText = formattedValue;

if (fromScroll) {
			this.#E.in.value = value;
		} else {
			this.#E.scroll.scrollLeft = ((value - this.#A.min) / this.#A.range) * this.#scrollRange;
		}

this.dispatchEvent(new CustomEvent('change', {
			detail: { value, formattedValue }, bubbles: true, composed: true
		}));
	}

#onMove(e) {
		this.#E.scroll.scrollLeft = this.#E.scroll.dataset.scroll - (e.clientX - this.#E.scroll.dataset.pointer);
	}

#onEnd() {
		this.#E.scroll.classList.remove('grabbing');
		document.removeEventListener('pointermove', this.#boundOnMove);
		document.removeEventListener('pointerup', this.#boundOnEnd);
		document.removeEventListener('pointercancel', this.#boundOnEnd);
	}

#onStart(e) {
		e.stopPropagation();
		this.#E.scroll.dataset.pointer = e.clientX;
		this.#E.scroll.dataset.scroll = this.#E.scroll.scrollLeft;
		this.#E.scroll.classList.add('grabbing');
		this.#E.scroll.setPointerCapture(e.pointerId);
		document.addEventListener('pointermove', this.#boundOnMove);
		document.addEventListener('pointerup', this.#boundOnEnd);
		document.addEventListener('pointercancel', this.#boundOnEnd);
	}
}

customElements.define('number-snapper', NumberSnapper);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg