स्लाइडर

श्रेणी: चयन
टोकन: comp.slider
स्तर: आधार
इनमें उपयोग: Slider field

अवलोकन

Web: tanrei-slider; schedule
SwiftUI: TanreiSlider; schedule
Jetpack Compose: TanreiSlider; schedule
Flutter: TanreiSlider; schedule
React Native: Slider; schedule

इससे जनरेट किया गया: docs/status/status.json, specs/slider.spec.json

निरंतर, स्टॉप के साथ स्टेप वाला, और एक रेंज

प्लेग्राउंड

size

orientation

value

startValue

range

min

max

step

origin

stops

valueIndicator

disabled

label

startLabel

valueText

startValueText

हर कंट्रोल लाइव कंपोनेंट की एक प्रॉपर्टी सेट करता है, और कोड भी उसी के साथ बदलता है। आपकी सेटिंग पेज के पते में रहती है, इसलिए लिंक खोलने पर वही स्थिति दिखती है। यह कोड वेब के लिए है। दूसरे प्लैटफ़ॉर्म के लिए “प्लैटफ़ॉर्म के अनुसार नामों का मिलान” देखें।

इस्तेमाल

स्लाइडर min और max (डिफ़ॉल्ट रूप से 0 और 100) के बीच एक मान चुनता है। range के साथ उसके दो हैंडल होते हैं और वह startValue से value तक का हिस्सा चुनता है। step 0 निरंतर है; 0 से ऊपर होने पर मान min और step के पूरे गुणजों के जोड़ पर स्नैप होते हैं।

स्लाइडर कोई लेबल नहीं बनाता। label सहायक तकनीक के लिए उसका नाम है, और दिखने वाला लेबल स्लाइडर के बग़ल में आपका अपना टेक्स्ट है, उन्हीं शब्दों में। रेंज को अपने शुरुआती हैंडल के लिए startLabel भी चाहिए।

दो इवेंट बदलाव की ख़बर देते हैं। input व्यक्ति के ड्रैग करते समय हर बदलाव पर फ़ायर होता है, और change एक बार तब फ़ायर होता है जब बदलाव पूरा हो जाता है: दबाना ख़त्म हुआ, या किसी कुंजी से या सहायक तकनीक से कोई बदलाव किया गया। जो मान आप ख़ुद सेट करते हैं, वह दोनों में से कोई फ़ायर नहीं करता। हर प्लैटफ़ॉर्म इन्हें अपने तरीक़े से नाम देता है: Compose पर onValueChange और onValueChangeFinished, Flutter पर onChanged और onChangeEnd, React Native पर onValueChange और onSlidingComplete, और SwiftUI पर बाइंडिंग और onCommit।

जिस संशोधन ने स्लाइडर को उसका गोल हैंडल दिया, और जिस समीक्षा ने उसकी रिंग को भारी बनाया, उन्होंने सिर्फ़ उसका रूप बदला, इसलिए नीचे का हर उदाहरण मौजूदा है। वेब मौजूदा रूप बनाता है। SwiftUI, Compose, Flutter और React Native पीछे हैं: जब तक वे बराबरी पर नहीं आते, वे अब भी पिछला रूप बनाते हैं, यानी एक ठोस गोल हैंडल, जिसके किनारे पर ट्रैक कटे होते हैं, और हर साइज़ के लिए स्टॉप बिंदु का एक ही साइज़।

<!-- स्लाइडर कोई लेबल नहीं बनाता: अपना दिखने वाला लेबल उसके बग़ल में रखें, उन्हीं शब्दों में। -->
<tanrei-slider name="volume" label="वॉल्यूम" value="40" value-indicator="active"></tanrei-slider>

<!-- स्टेप वाला, हर स्टेप पर एक बिंदु के साथ। -->
<tanrei-slider label="ब्राइटनेस" value="30" step="10" stops></tanrei-slider>

<!-- रेंज एक ही name के नीचे पहले start-value, फिर value सबमिट करती है। -->
<tanrei-slider name="price" range min="0" max="500" step="10" start-value="100" value="300"
  label="अधिकतम क़ीमत" start-label="न्यूनतम क़ीमत"></tanrei-slider>

<script type="module">
  import '@tanrei/web/components/slider';
  const volume = document.querySelector('[name="volume"]');
  // input और change फ़ायर करने से पहले एलिमेंट अपना value ख़ुद सेट करता है।
  volume.addEventListener('input', () => preview(volume.value));
  volume.addEventListener('change', () => save(volume.value));
</script>

import { Slider } from '@tanrei/react';

<Slider
  label="वॉल्यूम"
  value={volume}
  valueIndicator="active"
  onInput={(e) => setVolume(e.currentTarget.value)}
  onChange={(e) => save(e.detail.value)}
/>

<Slider
  range
  min={0}
  max={500}
  step={10}
  startValue={minPrice}
  value={maxPrice}
  label="अधिकतम क़ीमत"
  startLabel="न्यूनतम क़ीमत"
  onInput={(e) => setPrices(e.currentTarget.startValue, e.currentTarget.value)}
/>

import Tanrei

// हर बदलाव बाइंडिंग में लिखा जाता है; onCommit तब चलता है जब बदलाव पूरा हो जाता है।
TanreiSlider("वॉल्यूम", value: $volume, in: 0...100, onCommit: save)

TanreiSlider("ब्राइटनेस", value: $brightness, in: 0...100, step: 10)

// रेंज वह इनिशियलाइज़र है जिसकी बाइंडिंग एक ClosedRange है: lowerBound शुरुआती हैंडल है।
TanreiSlider("अधिकतम क़ीमत", startLabel: "न्यूनतम क़ीमत", value: $prices, in: 0...500, step: 10)

import io.github.chnotchy.tanrei.components.TanreiSlider

// स्टेट होइस्टिंग: value को onValueChange से बदलें।
TanreiSlider(
    value = volume,
    onValueChange = { volume = it },
    contentDescription = "वॉल्यूम",
    onValueChangeFinished = ::save, // यह मान साथ लाता है, foundation वाले के उलट
)

// step एक साइज़ है, Material की तरह स्टेप की गिनती नहीं।
TanreiSlider(value = brightness, onValueChange = { brightness = it }, step = 10f, contentDescription = "ब्राइटनेस")

// रेंज वह ओवरलोड है जिसका value एक ClosedFloatingPointRange है।
TanreiSlider(
    value = prices,
    onValueChange = { prices = it },
    valueRange = 0f..500f,
    step = 10f,
    contentDescription = "अधिकतम क़ीमत",
    startContentDescription = "न्यूनतम क़ीमत",
)

import 'package:tanrei/tanrei.dart';

TanreiSlider(
  value: volume,
  onChanged: (double value) => setState(() => volume = value), // null इसे अक्षम कर देता है
  onChangeEnd: save,
  semanticLabel: 'वॉल्यूम',
);

// step एक साइज़ है, Material के divisions नहीं।
TanreiSlider(value: brightness, step: 10, onChanged: (double value) => setState(() => brightness = value), semanticLabel: 'ब्राइटनेस');

TanreiSlider.range(
  start: minPrice,
  end: maxPrice,
  max: 500,
  step: 10,
  onChanged: (double start, double end) => setState(() {
    minPrice = start;
    maxPrice = end;
  }),
  semanticLabel: 'अधिकतम क़ीमत',
  startSemanticLabel: 'न्यूनतम क़ीमत',
);

import { Slider } from '@tanrei/react-native';

<Slider value={volume} onValueChange={setVolume} onSlidingComplete={save} accessibilityLabel="वॉल्यूम" />

<Slider value={brightness} step={10} stops onValueChange={setBrightness} accessibilityLabel="ब्राइटनेस" />

// रेंज: दोनों कॉलबैक को (value, startValue) मिलते हैं।
<Slider
  range
  minimumValue={0}
  maximumValue={500}
  step={10}
  startValue={minPrice}
  value={maxPrice}
  onValueChange={(value, startValue) => setPrices(startValue, value)}
  accessibilityLabel="अधिकतम क़ीमत"
  startAccessibilityLabel="न्यूनतम क़ीमत"
/>

स्पेक

साइज़, केंद्रित, मान इंडिकेटर, खड़ा और अक्षम

डिफ़ॉल्ट सिस्टम में हैंडल एक रिंग है: सरफ़ेस के रंग से भरा 20 का गोला, जो सक्रिय ट्रैक के रंग की आउटलाइन के भीतर है। आउटलाइन 3 चौड़ी है और गोले के किनारे के भीतर बनती है, इसलिए वह हैंडल का साइज़ नहीं बदलती: वह सरफ़ेस के रंग की 14 की चकती छोड़ती है, और ज़्यादा चौड़ी आउटलाइन उससे छोटी चकती छोड़ेगी। ट्रैक और सक्रिय ट्रैक हैंडल के नीचे से गुज़रते हैं और उसके केंद्र पर मिलते हैं, इसलिए सक्रिय ट्रैक एक ही रेखा जैसा दिखता है जो रिंग में ख़त्म होती है। हैंडल हर साइज़ पर 20 का है, 4, 6 और 8 के ट्रैक पर।

स्टॉप बिंदु, और वह बिंदु जो हैंडल के रास्ते का अंत दिखाता है, ट्रैक से आधे मोटे हैं: small, medium और large पर 2, 3 और 4। मान इंडिकेटर रिंग के ऊपरी सिरे से थोड़ा ऊपर रहता है, उसके केंद्र की सीध में। अक्षम होने पर रिंग अपना फ़िल रखती है, और उसकी आउटलाइन सक्रिय ट्रैक के साथ फीकी पड़ती है।

कोई डिज़ाइन सिस्टम उन्हीं टोकन से हैंडल को अपने तरीक़े से बना सकता है। आउटलाइन 0 होने पर हैंडल एक ठोस शेप है, और ट्रैक और हैंडल के बीच गैप होने पर ट्रैक उससे पहले रुक जाते हैं और वहाँ गोल होते हैं। m3-like इसी तरह Material की खड़ी पट्टी बनाता है।

संरचना

वेब पैकेज जिस तरह फ़िक्स्चर continuous बनाता है, उसी के ऊपर बनाया गया।

भाग	विवरण
1 `track`	The line the handle travels along: the whole range from min to max. Drawn in the track color where it is not active.
2 `active-track`	The part of the track from the origin to the value, or between the two handles of a range, drawn over the track.
3 `handle`	The part the person drags, one per value: in Tanrei a circle (its width along the track equals its height across it) with a fill and an outline of its own, a narrow upright bar where a system says so.
4 `handle-outline` · वैकल्पिक	The ring drawn over the handle's fill, inside its edge, so the handle keeps its size however wide the ring is: a wider ring leaves a smaller disc of fill. None where its width is 0.
5 `container`	The round state layer centered on a handle, moving with it. It carries hover, focus and press and is invisible at rest.
6 `stop-indicator` · वैकल्पिक	A dot on the track's midline, half the track's thickness across in Tanrei: at an end of the handle's travel that lies on the track, and at every step while stops is true.
7 `value-indicator` · वैकल्पिक	A small label beside a handle that shows its value while the handle is pressed or focused, or always.
8 `focus-ring`	Gap-then-ring indicator around the handle that has keyboard focus.

माप

लंबाई	टोकन	मान (px)
`handle` height	`tanrei.comp.slider.handle.height.small`	20
`container` size	`tanrei.comp.slider.container.size`	40

वेब पैकेज जिस तरह फ़िक्स्चर continuous बनाता है, उसी के ऊपर बनाया गया।

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`size`	`small` \| `medium` \| `large`	`"small"`	The track's weight and the stop dots' size (and, where a system says so, the handle's height). Small is the everyday slider; medium and large give a prominent control (a volume or brightness slider) more weight. The hit area always meets the minimum target. A design system may add values.
`orientation`	`horizontal` \| `vertical`	`"horizontal"`	Horizontal runs from the inline start (min) to the inline end (max); vertical runs from the bottom (min) to the top (max).
`value`	`number`	`0`	The value of the only handle, or of a range's end handle.
`startValue`	`number`	`0`	The value of a range's start handle. Ignored while range is false.
`range`	`boolean`	`false`	Draws two handles, choosing the range from startValue to value (a price filter).
`min`	`number`	`0`	The lowest value, at the track's start.
`max`	`number`	`100`	The highest value, at the track's end.
`step`	`number`	`0`	0 is continuous. Above 0 the slider is discrete: its values are min plus whole multiples of step, up to max.
`origin`	`number`	`null`	Where the active track starts. Null starts it at min. A value inside the range makes a centered slider (a balance control) whose active track grows toward either side. Ignored while range is true.
`stops`	`boolean`	`false`	Draws a stop dot at every value a discrete slider can take. Meant for a few steps; ignored while step is 0.
`valueIndicator`	`none` \| `active` \| `always`	`"none"`	Whether a handle shows its value beside it: never, while it is pressed or has keyboard focus, or all the time.
`disabled`	`boolean`	`false`	Prevents interaction and removes the handles from the focus order.
`label`	`string`	`""`	Names the slider (a range's end handle) for assistive technology. Never drawn: a visible label is the product's text next to the slider, in the same words. Required.
`startLabel`	`string`	`""`	Names a range's start handle ("Minimum price"). Required while range is true.
`valueText`	`string`	`""`	The value as words ("40 %", "3 stars"), spoken and shown by the value indicator in place of the number. For a range, the end handle's.
`startValueText`	`string`	`""`	The start handle's valueText, for a range.

इवेंट

इवेंट	विवरण
`input`	The person changed a value; carries value and, for a range, startValue. Emitted for every change during a drag, not when the product sets a value.
`change`	The person finished changing a value (the press ended, or a key or assistive-technology adjustment was made); carries value and, for a range, startValue. Always after the input it follows.

स्टेट

व्यवहार

EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।

ID	आवश्यकता
`SLD-1`	THE slider SHALL keep value (and, while range is true, startValue) between min and max; WHILE step is greater than 0 it SHALL take only min plus whole multiples of step that do not exceed max, snapping to the nearest, and WHILE step is 0 any value between min and max.
`SLD-2`	WHEN the person presses the slider by pointer or touch — the track, a handle, or the space around them — THE slider SHALL move the handle nearer the press (for a range whose handles meet, the one that can move toward the press) to the value under it and, WHILE the press moves, SHALL make the handle follow it along the track, clamped to the handle's range and snapped to step; it SHALL emit input once for each value change and, WHEN the press ends with a value other than the one it started with, change once after the last input. On touch the handle SHALL move once the press has travelled along the track by the platform's touch slop, or when a press that did not move ends; a press that first travels across the track by the slop SHALL be left to an enclosing scroll view and SHALL change nothing.
`SLD-3`	WHILE a handle has keyboard focus THE slider SHALL increase its value by one keyboard step with Right Arrow or Up Arrow and decrease it with Left Arrow or Down Arrow (Right and Left swapped in a right-to-left horizontal slider), by ten keyboard steps with Page Up and Page Down, and set it to the lowest and highest value it can take with Home and End; the keyboard step is step, or one hundredth of max − min while step is 0. Each key press that changes the value SHALL emit input and then change once; a key press that changes nothing SHALL emit nothing.
`SLD-4`	WHEN assistive technology increments or decrements a handle (a vertical swipe on an adjustable element, the platform's increment and decrement actions) THE slider SHALL change its value by one keyboard step, and WHEN it sets a value directly where the platform allows that THE slider SHALL clamp and snap it; either SHALL emit input and then change once.
`SLD-5`	WHILE range is true THE slider SHALL draw a start handle at startValue and an end handle at value, SHALL stop each handle at the other's value so that the two may meet but never cross, and SHALL make each handle its own Tab stop, the start handle first, and its own element for assistive technology.
`SLD-6`	WHILE range is false THE slider SHALL draw the active track between origin (min while origin is null, and origin clamped to the range) and value, on whichever side of origin value lies; WHILE range is true it SHALL draw the active track between startValue and value.
`SLD-7`	THE slider SHALL be as long along its axis as its layout gives it and, across it, as thick as the larger of comp.slider.container.size and comp.slider.handle.height.small for size small (and so on for each size); it SHALL extend its hit area across its axis to sys.target.touch for touch input and sys.target.pointer for fine pointers without changing that size (a platform that cannot tell the input type SHALL use sys.target.touch), the whole slider being the hit area, and a handle drawn smaller than the target SHALL NOT make the hit area smaller. It SHALL draw the track comp.slider.track.thickness.small thick for size small (and so on), centered across the axis and inset from each end of the slider by half of comp.slider.container.size, so that a handle and its state layer stay inside the slider at min and max; a handle's center SHALL travel between the two points half the track's thickness in from the track's ends, concentric with its rounded ends.
`SLD-8`	THE slider SHALL draw the track in comp.slider.standard.track.color and the active track over it in comp.slider.standard.active-track.color. WHILE comp.slider.track.gap is 0 the track and the active track SHALL run under each handle and meet at its center, so that nothing lies between the active track and the handle; WHILE it is above 0 they SHALL stop that far from each side of each handle, measured from the handle's edge. The pieces SHALL be rounded by comp.slider.track.shape.small for size small (and so on), clamped to half the thickness, at the track's two ends and, WHILE comp.slider.track.gap is above 0, beside a handle; they SHALL be square where two pieces meet (under a handle while the gap is 0, and at an origin inside the travel). It SHALL draw each handle centered on the track's midline, comp.slider.standard.handle.width along the axis and comp.slider.handle.height.small across it for size small (and so on), rounded by comp.slider.handle.shape clamped to half its smaller side, painted as SLD-24 says, above the tracks — each part from the tokens of the state SLD-11 names.
`SLD-9`	THE slider SHALL draw a dot of comp.slider.stop-indicator.size.small for size small (and so on) centered on the track's midline at each end of the handles' travel that lies on the track rather than on the active track, and WHILE stops is true and step is greater than 0 also at every value the slider can take; a dot SHALL be drawn in comp.slider.standard.stop-indicator.color where it lies on the track and in comp.slider.standard.active-stop-indicator.color where it lies on the active track, SHALL NOT be drawn where a handle or its track gap covers it, and a size of 0 SHALL draw none.
`SLD-10`	THE slider SHALL draw each handle's container, a shape of comp.slider.container.size on each side with corners comp.slider.container.shape, centered on the handle and moving with it, filled with comp.slider.standard.container.color from the handle's state, behind the handle and above the tracks; it may extend beyond the track without affecting layout, and a size of 0 SHALL draw none.
`SLD-11`	WHILE a handle is hovered, keyboard-focused or pressed THE slider SHALL render that handle and its container from the component tokens of that handle's highest-precedence active state, with precedence pressed over focused over hovered, and the tracks, stop dots and opacity from the highest-precedence state of any of its handles; a handle is hovered while a fine pointer is over the slider and that handle is the one a press there would move; focus gained by pointer or touch SHALL NOT select the focused state. WHEN the colors change between states THE slider SHALL animate them over comp.slider.motion.state-duration with comp.slider.motion.state-easing, and at once where motion is reduced.
`SLD-12`	WHEN a handle receives keyboard focus THE slider SHALL show the focus ring around that handle without animation; focus gained by pointer or touch SHALL NOT show it.
`SLD-13`	WHEN the slider is pressed by pointer or touch THE slider SHALL show the pressed state of the handle the press moves without delay, SHALL keep it for as long as the press lasts, and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner.
`SLD-14`	WHILE pressed THE slider SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; handle, tracks, stop dots, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.slider.motion.feedback-duration with comp.slider.motion.state-easing, fades over comp.slider.motion.state-duration with comp.slider.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced. The slider's point of contact is the pressed handle's center, because the handle moves to the press.
`SLD-15`	THE slider SHALL ease its container, handle and track corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
`SLD-16`	WHEN a value changes by a key, by assistive technology, by a press on the track that did not drag, or because the product set it, THE slider SHALL move the handle and the active track to it over comp.slider.motion.value-duration with comp.slider.motion.value-easing; WHILE a press drags a handle, the handle SHALL follow the press without delay; WHERE motion is reduced every change SHALL be shown at once. WHEN the product sets value or startValue THE slider SHALL NOT emit input or change.
`SLD-17`	WHILE valueIndicator is always, or valueIndicator is active and a handle is pressed or has keyboard focus, THE slider SHALL draw that handle's value indicator comp.slider.value-indicator.offset beyond the handle's outer edge across the axis — above the handle in a horizontal slider, at its inline start in a vertical one; for a round handle beyond the top of its circle, outline included, which lies half of comp.slider.handle.height.small from the track's midline for size small (and so on) — with its center on the handle's center along the axis, shifted along the axis only as far as it must to stay inside the window: the handle's value text on one line in comp.slider.value-indicator.label.typescale and comp.slider.value-indicator.label.color, centered in a container of comp.slider.value-indicator.container.color at least comp.slider.value-indicator.container.height high and as wide as the text plus comp.slider.value-indicator.container.padding-inline on each side but never narrower than it is high, rounded by comp.slider.value-indicator.container.shape. The value indicator SHALL be drawn above neighbouring content and above the handle and its container, without affecting layout or being clipped by the slider, SHALL take no focus and no input (a read overlay), SHALL be hidden from assistive technology, and SHALL fade in and out over comp.slider.motion.state-duration with comp.slider.motion.state-easing, at once where motion is reduced.
`SLD-18`	THE slider SHALL give each handle a value text: valueText for the only handle and a range's end handle, startValueText for a range's start handle; or, while that is empty, what the product's own function writes for that handle's value, WHERE the product gave the slider such a function in the platform's idiom; or, with neither, the value formatted as a number in the platform's locale with as many fraction digits as the keyboard step has, at most two; the value indicator SHALL show it and assistive technology SHALL read it as the handle's value. THE slider SHALL ask the function again at every change of a value and WHEN the function itself changes, SHALL take an empty answer as no answer, and SHALL announce nothing for a change of the words alone.
`SLD-19`	THE slider SHALL expose each handle as a slider (the adjustable trait on Apple platforms) named by label, or by startLabel for a range's start handle, with its value, its value text, the lowest and highest value it can take (for a range, bounded by the other handle), its orientation and its disabled state; the tracks, stop dots, container and value indicator SHALL be hidden from assistive technology. WHILE a handle's label (label, or startLabel for a range's start handle) is not empty THE slider SHALL expose it as that handle's accessible name, over a name the product gives the slider on the element (aria-label or aria-labelledby). WHILE label is empty and the product gives the slider a name of its own on the element — aria-label, or aria-labelledby naming an element — THE slider SHALL expose that name on each handle whose own label is empty. WHILE label is empty and the product gives it none, or range is true and startLabel is empty, THE slider SHALL still render, and in debug builds report that a handle has no accessible name: one name of the product's does not tell a range's two handles apart.
`SLD-20`	WHILE disabled is true THE slider SHALL NOT change a value or emit input or change, SHALL NOT be focusable, SHALL show no value indicator, SHALL expose the disabled state to assistive technology, and SHALL render its container, handles, tracks, stop dots and opacity from the disabled component tokens.
`SLD-21`	WHILE orientation is vertical THE slider SHALL run its track from the bottom (min) to the top (max), be as tall as its layout gives it, and lay out every part SLD-7 to SLD-17 name turned a quarter turn; WHEN the layout direction is right-to-left THE slider SHALL run a horizontal track from the right (min) to the left (max), mirroring the active track, the stop dots and the arrow keys (SLD-3), and SHALL NOT mirror a vertical slider. WHILE a value indicator is drawn in a right-to-left layout THE slider SHALL keep it centred on its handle and shift it along the axis only as far as it must to stay inside the window, away from whichever edge of the window it would cross, as in left-to-right (SLD-17): the shift is physical and is not mirrored.
`SLD-22`	IF value, startValue or origin lies outside min and max, or off a step, THE slider SHALL draw and expose it clamped and snapped without emitting input or change; IF startValue is greater than value while range is true THE slider SHALL draw both handles at value; IF max is not greater than min THE slider SHALL draw its handles at the track's start and take no input; IF step is below 0 THE slider SHALL treat it as 0. In debug builds it SHALL report each of these.
`SLD-23`	WHEN size names a value that the active design system does not have, or orientation or valueIndicator a value the component does not define, THE slider SHALL render with the default value (small, horizontal, none), and in debug builds report the unknown value.
`SLD-24`	THE slider SHALL fill the whole shape of each handle with comp.slider.standard.handle.color and draw the handle's outline over the fill, comp.slider.handle-outline.width wide inside the handle's edge, in comp.slider.standard.handle-outline.color, so that the outline never changes the handle's width or height and a width of 0 draws none; it SHALL raise the handle by comp.slider.standard.handle.elevation. The parts under a handle (the tracks where they meet, a stop dot, the container) SHALL show through it only as far as its fill is translucent.
`SLD-25`	THE slider SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the slider is shown THE slider SHALL draw itself for the new direction at once, without a motion of its own, keeping its values and its focus, each value indicator placed again by the new direction.
`SLD-26`	THE slider SHALL lay out a handle's value text in its value indicator as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right word, a number with its sign or unit, a telephone number and an address keep their own order in a right-to-left layout and reorder nothing beside them; THE slider SHALL still place the indicator and align its lines by the layout direction, not by the text's own.
`SLD-27`	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE slider SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries its role (every handle carries them) — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the slider is invalid — except those the slider owns (aria-disabled), which it SHALL move and not expose. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE slider SHALL take it off that element. WHEN the product sets an aria- attribute the slider owns THE slider SHALL report it in debug builds.

प्लैटफ़ॉर्म के अनुसार नामों का मिलान

पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	`tanrei-slider`	`TanreiSlider`	`TanreiSlider`	`TanreiSlider`	`Slider`
`size` · प्रॉपर्टी	`size`	`size`	`size`	`size`	`size`
`orientation` · प्रॉपर्टी	`orientation`	`orientation`	`orientation`	`orientation`	`orientation`
`value` · प्रॉपर्टी	`value`	`value`	`value`	`value`	`value`
`startValue` · प्रॉपर्टी	`startValue`	`value`	`value`	`start`	`startValue`
`range` · प्रॉपर्टी	`range`	`value`	`value`	`range`	`range`
`min` · प्रॉपर्टी	`min`	`bounds`	`valueRange`	`min`	`minimumValue`
`max` · प्रॉपर्टी	`max`	`bounds`	`valueRange`	`max`	`maximumValue`
`step` · प्रॉपर्टी	`step`	`step`	`step`	`step`	`step`
`origin` · प्रॉपर्टी	`origin`	`origin`	`origin`	`origin`	`origin`
`stops` · प्रॉपर्टी	`stops`	`showsStops`	`showStops`	`showStops`	`stops`
`valueIndicator` · प्रॉपर्टी	`valueIndicator`	`valueIndicator`	`valueIndicator`	`valueIndicator`	`valueIndicator`
`disabled` · प्रॉपर्टी	`disabled`	`disabled`	`enabled`	`onChanged`	`disabled`
`label` · प्रॉपर्टी	`label`	`label`	`contentDescription`	`semanticLabel`	`accessibilityLabel`
`startLabel` · प्रॉपर्टी	`startLabel`	`startLabel`	`startContentDescription`	`startSemanticLabel`	`startAccessibilityLabel`
`valueText` · प्रॉपर्टी	`valueText`	`valueText`	`stateDescription`	`semanticValue`	`valueText`
`startValueText` · प्रॉपर्टी	`startValueText`	`startValueText`	`startStateDescription`	`startSemanticValue`	`startValueText`
`input` · इवेंट	`input`	`value`	`onValueChange`	`onChanged`	`onValueChange`
`change` · इवेंट	`change`	`onCommit`	`onValueChangeFinished`	`onChangeEnd`	`onSlidingComplete`
टिप्पणियाँ	Attributes are kebab-case (`start-value`, `value-indicator`, `start-label`, `value-text`, `start-value-text`). Each handle is an element with `role="slider"` and its aria-value attributes, `aria-orientation` and `aria-label` in the shadow root (not `ElementInternals`, which axe cannot see). Not `<input type="range">`: it has one handle, no gap, no stop dots, and its parts cannot be styled alike in every engine. The handle's outline is its box's border with `box-sizing: border-box`, over its background (the fill), so it keeps its width and height (SLD-24); while track.gap is 0 the two pieces of the tracks meet at the handle's center under it (SLD-8). Form-associated: it takes `name` and submits value (a range submits startValue, then value, under the same name), and it sets its own `value` and `startValue` before firing `input` and `change`, as a native control does. Snapshot harness: the stages of SLD-7. The product's function for a value's words (SLD-18) is `formatValue`, a property and never an attribute: `((value: number) => string) \| null`, null by default; it is asked for each handle at every change of a value and when the property itself is set.	`Slider` idiom: `TanreiSlider(_ label:, value: Binding<Double>, in bounds: ClosedRange<Double> = 0...100, step:)`; a range is the initializer whose `value` is a `Binding<ClosedRange<Double>>` (lower bound startValue, upper bound value) and which also takes `startLabel`. Every change writes the binding, which is the input event. `onCommit` is Tanrei's own parameter, called when a change is finished (SLD-2, SLD-3, SLD-4), as the text field's is; SwiftUI's `onEditingChanged` reports a drag's start and end, not a change. SwiftUI's own `Slider` is not used: its track and handle cannot take the tokens. Each handle is an adjustable element (`.accessibilityAdjustableAction`, `.accessibilityValue`); `disabled` follows `.disabled(_:)`. Lagging: ships an earlier form of the slider — a solid round handle, tracks cut at the handle's edge (square there while track.gap is 0), one stop-dot size for every size. It does not draw yet: the handle's fill and outline (SLD-24), the tracks meeting under the handle while track.gap is 0 (SLD-8), the stop dot per size (SLD-9) and the value indicator's placement over a round handle (SLD-17). Not built on this platform yet: the product's function for a value's words (SLD-18) is a `format: ((Double) -> String)? = nil` parameter. Not built on this platform yet: the stage color a fixture's surface names, which the continuous-on-container-highest fixture draws on.	Compose idiom (as `Slider` and `RangeSlider`): `TanreiSlider(value: Float, onValueChange, modifier, enabled, valueRange: ClosedFloatingPointRange<Float> = 0f..100f, step: Float = 0f, onValueChangeFinished, …)`; a range is the overload whose `value` is a `ClosedFloatingPointRange<Float>` (start and end) and which also takes `startContentDescription` and `startStateDescription`. `step` is a size, not Material's count of `steps`. State hoisting: the caller moves `value` from `onValueChange`. `enabled` is the inverse flag. Each handle has Compose's slider semantics (`progressBarRangeInfo` and `setProgress`), with `stateDescription` as its value text. Lagging: ships an earlier form of the slider — a solid round handle with its shape clipped out of the tracks, one stop-dot size for every size. It does not draw yet: the handle's fill and outline (SLD-24), the tracks meeting under the handle while track.gap is 0 (SLD-8), the stop dot per size (SLD-9) and the value indicator's placement over a round handle (SLD-17). Not built on this platform yet: the product's function for a value's words (SLD-18) is a `format: ((Float) -> String)? = null` parameter. Not built on this platform yet: the stage color a fixture's surface names, which the continuous-on-container-highest fixture draws on.	Flutter idiom (as `Slider`): `TanreiSlider(value:, onChanged:, onChangeEnd:, min: 0, max: 100, step: 0, …)`, with `step` a size rather than Material's `divisions`; a range is the named constructor `TanreiSlider.range(start:, end:, onChanged: (start, end) {…}, …)`, since Flutter's `RangeValues` belongs to Material. A null `onChanged` disables it. `orientation` is Flutter's `Axis`. Each handle is a `Semantics(slider: true, value:, increasedValue:, decreasedValue:, onIncrease:, onDecrease:)` node; the widgets library draws everything else. Lagging: ships an earlier form of the slider — a solid round handle, tracks cut at the handle's edge and rounded there (a notch between the round end and the handle), one stop-dot size for every size. It does not draw yet: the handle's fill and outline (SLD-24), the tracks meeting under the handle while track.gap is 0 (SLD-8), the stop dot per size (SLD-9) and the value indicator's placement over a round handle (SLD-17). Not built on this platform yet: the product's function for a value's words (SLD-18) is `format: String Function(double)?`. Not built on this platform yet: the stage color a fixture's surface names, which the continuous-on-container-highest fixture draws on.	Controlled, in the community slider's idiom (`value`, `minimumValue`, `maximumValue`, `step`, `onValueChange`, `onSlidingComplete`), without depending on it: React Native has no slider in its core. A range adds `range` and `startValue`, and both callbacks receive `(value, startValue)`. Each handle is a view with `accessibilityRole="adjustable"`, `accessibilityValue` (`{ min, max, now, text }`) and the increment and decrement accessibility actions; the drag is a `the touch responder props (onStartShouldSetResponder and the rest)` that yields to an enclosing `ScrollView` as SLD-2 says. The arrow keys work where a hardware keyboard is attached, as the tabs row's do. Lagging: ships an earlier form of the slider — a solid round handle, tracks cut at the handle's edge and rounded there (a notch between the round end and the handle), one stop-dot size for every size. It does not draw yet: the handle's fill and outline (SLD-24), the tracks meeting under the handle while track.gap is 0 (SLD-8), the stop dot per size (SLD-9) and the value indicator's placement over a round handle (SLD-17). Not built on this platform yet: the product's function for a value's words (SLD-18) is a `formatValue` prop, `(value: number) => string`. Not built on this platform yet: the stage color a fixture's surface names, which the continuous-on-container-highest fixture draws on.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
`--tanrei-comp-slider-container-shape`	`sys.shape.corner.full`	9999px
`--tanrei-comp-slider-container-size`	—	40px
`--tanrei-comp-slider-disabled-opacity`	—	1
`--tanrei-comp-slider-focused-opacity`	—	1
`--tanrei-comp-slider-handle-outline-width`	—	3px
`--tanrei-comp-slider-handle-height-large`	—	20px
`--tanrei-comp-slider-handle-height-medium`	—	20px
`--tanrei-comp-slider-handle-height-small`	—	20px
`--tanrei-comp-slider-handle-shape`	`sys.shape.corner.full`	9999px
`--tanrei-comp-slider-hovered-opacity`	—	1
`--tanrei-comp-slider-motion-feedback-duration`	`sys.motion.role.feedback`	450ms
`--tanrei-comp-slider-motion-state-duration`	`sys.motion.role.state.compact`	200ms
`--tanrei-comp-slider-motion-state-easing`	`sys.motion.easing.state`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-slider-motion-value-duration`	`sys.motion.role.selection.travel`	250ms
`--tanrei-comp-slider-motion-value-easing`	`sys.motion.easing.spatial`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-slider-pressed-opacity`	—	1
`--tanrei-comp-slider-standard-active-stop-indicator-color`	`sys.color.on-primary`	#ffffff
`--tanrei-comp-slider-standard-active-track-color`	`sys.color.primary`	#1b1b1b
`--tanrei-comp-slider-standard-container-color`	—	#000000 · 0%
`--tanrei-comp-slider-standard-disabled-active-stop-indicator-color`	—	#ffffff
`--tanrei-comp-slider-standard-disabled-active-track-color`	—	#1b1b1b · 38%
`--tanrei-comp-slider-standard-disabled-container-color`	—	#000000 · 0%
`--tanrei-comp-slider-standard-disabled-handle-outline-color`	—	#1b1b1b · 38%
`--tanrei-comp-slider-standard-disabled-handle-color`	—	#ffffff
`--tanrei-comp-slider-standard-disabled-handle-elevation`	—
`--tanrei-comp-slider-standard-disabled-handle-width`	—	20px
`--tanrei-comp-slider-standard-disabled-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-slider-standard-disabled-stop-indicator-color`	—	#1b1b1b · 38%
`--tanrei-comp-slider-standard-disabled-track-color`	—	#1b1b1b · 12%
`--tanrei-comp-slider-standard-focused-active-stop-indicator-color`	—	#ffffff
`--tanrei-comp-slider-standard-focused-active-track-color`	—	#1b1b1b
`--tanrei-comp-slider-standard-focused-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-slider-standard-focused-handle-outline-color`	—	#1b1b1b
`--tanrei-comp-slider-standard-focused-handle-color`	—	#ffffff
`--tanrei-comp-slider-standard-focused-handle-elevation`	—
`--tanrei-comp-slider-standard-focused-handle-width`	—	20px
`--tanrei-comp-slider-standard-focused-state-layer-color`	—	#1b1b1b
`--tanrei-comp-slider-standard-focused-stop-indicator-color`	—	#4b4b4b
`--tanrei-comp-slider-standard-focused-track-color`	—	#eeeeee
`--tanrei-comp-slider-standard-handle-outline-color`	`sys.color.primary`	#1b1b1b
`--tanrei-comp-slider-standard-handle-color`	`sys.color.surface`	#ffffff
`--tanrei-comp-slider-standard-handle-elevation`	`sys.elevation.level0`
`--tanrei-comp-slider-standard-handle-width`	—	20px
`--tanrei-comp-slider-standard-hovered-active-stop-indicator-color`	—	#ffffff
`--tanrei-comp-slider-standard-hovered-active-track-color`	—	#1b1b1b
`--tanrei-comp-slider-standard-hovered-container-color`	—	#1b1b1b · 8%
`--tanrei-comp-slider-standard-hovered-handle-outline-color`	—	#1b1b1b
`--tanrei-comp-slider-standard-hovered-handle-color`	—	#ffffff
`--tanrei-comp-slider-standard-hovered-handle-elevation`	—
`--tanrei-comp-slider-standard-hovered-handle-width`	—	20px
`--tanrei-comp-slider-standard-hovered-state-layer-color`	—	#1b1b1b
`--tanrei-comp-slider-standard-hovered-stop-indicator-color`	—	#4b4b4b
`--tanrei-comp-slider-standard-hovered-track-color`	—	#eeeeee
`--tanrei-comp-slider-standard-pressed-active-stop-indicator-color`	—	#ffffff
`--tanrei-comp-slider-standard-pressed-active-track-color`	—	#1b1b1b
`--tanrei-comp-slider-standard-pressed-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-slider-standard-pressed-handle-outline-color`	—	#1b1b1b
`--tanrei-comp-slider-standard-pressed-handle-color`	—	#ffffff
`--tanrei-comp-slider-standard-pressed-handle-elevation`	—
`--tanrei-comp-slider-standard-pressed-handle-width`	—	20px
`--tanrei-comp-slider-standard-pressed-state-layer-color`	—	#1b1b1b
`--tanrei-comp-slider-standard-pressed-stop-indicator-color`	—	#4b4b4b
`--tanrei-comp-slider-standard-pressed-track-color`	—	#eeeeee
`--tanrei-comp-slider-standard-state-layer-color`	`comp.slider.standard.handle-outline.color`	#1b1b1b
`--tanrei-comp-slider-standard-stop-indicator-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-slider-standard-track-color`	`sys.color.surface-variant`	#eeeeee
`--tanrei-comp-slider-stop-indicator-size-large`	—	4px
`--tanrei-comp-slider-stop-indicator-size-medium`	—	3px
`--tanrei-comp-slider-stop-indicator-size-small`	—	2px
`--tanrei-comp-slider-track-gap`	`sys.space.space0`	0px
`--tanrei-comp-slider-track-shape-large`	`sys.shape.corner.full`	9999px
`--tanrei-comp-slider-track-shape-medium`	`sys.shape.corner.full`	9999px
`--tanrei-comp-slider-track-shape-small`	`sys.shape.corner.full`	9999px
`--tanrei-comp-slider-track-thickness-large`	—	8px
`--tanrei-comp-slider-track-thickness-medium`	—	6px
`--tanrei-comp-slider-track-thickness-small`	—	4px
`--tanrei-comp-slider-value-indicator-container-color`	`sys.color.inverse-surface`	#1f1f1f
`--tanrei-comp-slider-value-indicator-container-height`	—	24px
`--tanrei-comp-slider-value-indicator-container-padding-inline`	`sys.space.space100`	8px
`--tanrei-comp-slider-value-indicator-container-shape`	`sys.shape.corner.small`	6px
`--tanrei-comp-slider-value-indicator-label-color`	`sys.color.inverse-on-surface`	#f1f1f1
`--tanrei-comp-slider-value-indicator-offset`	`sys.space.space100`	8px
`--tanrei-comp-slider-value-indicator-label-typescale`	`sys.typescale.label-small`	500 12px/1.3333

फ़िक्स्चर

मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।

`size: small` (9)

continuous

value: 40 label: Volume

continuous-on-container-highest

value: 40 label: Volume

discrete-stops

value: 30 step: 10 stops: true label: Brightness

range

value: 60 startValue: 20 range: true label: Maximum price startLabel: Minimum price

centered

value: 20 min: -50 max: 50 origin: 0 label: Balance

value-indicator

value: 40 valueIndicator: always label: Volume

vertical

orientation: vertical value: 60 label: Volume

disabled

value: 40 disabled: true label: Volume

disabled-stops

value: 60 step: 20 stops: true disabled: true label: Brightness

`size: medium` (1)

medium

size: medium value: 40 label: Volume

`size: large` (1)

large

size: large value: 40 label: Volume

इससे जनरेट किया गया: specs/slider.spec.json, tokens/comp/slider.tokens.json, design/tokens/

दिशानिर्देश

कब इस्तेमाल करें

स्लाइडर तब इस्तेमाल करें जब लोग कोई मान अंदाज़ से चुनते हैं और हैंडल चलाते हुए उसका असर देखते हैं: वॉल्यूम, ब्राइटनेस, किसी फ़ोटो का एक्सपोज़र, नक़्शे पर खोज का दायरा। रेंज स्लाइडर निचली और ऊपरी सीमा वाले फ़िल्टर के लिए ठीक है, जैसे क़ीमत।

जब सटीक संख्या ट्रैक पर उसकी जगह से ज़्यादा मायने रखती हो, जैसे कोई रक़म या मात्रा, तो टेक्स्ट फ़ील्ड इस्तेमाल करें, या स्लाइडर के बग़ल में एक रखें ताकि व्यक्ति दोनों में से कोई भी तरीक़ा अपना सके। जब नाम वाले कुछ ही विकल्प हों, जैसे कम, मध्यम और ज़्यादा, तो रेडियो बटन हर एक को नाम देते हैं, या जहाँ सिस्टम में हो वहाँ सेगमेंटेड बटन।

निरंतर या स्टेप वाला

निरंतर (step 0) min और max के बीच का कोई भी मान लेता है। इसे तब इस्तेमाल करें जब बीच के मान मायने रखते हों और असर तुरंत दिखता हो।
स्टेप वाला (step 0 से ऊपर) min और step के पूरे गुणजों के जोड़ पर स्नैप होता है। इसे तब इस्तेमाल करें जब सिर्फ़ पूरी इकाइयाँ मायने रखती हों: स्टार, पॉइंट में फ़ॉन्ट साइज़, दहाइयों में प्रतिशत।
stops हर उस मान पर एक बिंदु बनाता है जो स्टेप वाला स्लाइडर ले सकता है। जब स्टेप कम हों, तो इसे चालू करें, ताकि लोग उन्हें गिन सकें। बहुत से स्टेप होने पर बिंदु ट्रैक को भर देते हैं, इसलिए तब इन्हें बंद रखें।

ऐरो कुंजियाँ एक स्टेप चलाती हैं, या निरंतर स्लाइडर पर रेंज का सौवाँ हिस्सा। Page Up और Page Down दस स्टेप चलाती हैं।

रेंज

range दो हैंडल बनाता है, startValue से value तक। हैंडल मिल सकते हैं, पर एक-दूसरे को कभी पार नहीं करते। हर हैंडल अपना अलग Tab स्टॉप है और स्क्रीन रीडर के लिए अपना अलग कंट्रोल, और स्क्रीन रीडर वह रेंज सुनाता है जहाँ तक वह हैंडल अब भी पहुँच सकता है। दोनों हैंडल को नाम दें: startLabel (“न्यूनतम क़ीमत”) और label (“अधिकतम क़ीमत”)।

केंद्रित स्लाइडर

origin तय करता है कि सक्रिय ट्रैक कहाँ से शुरू होता है। ख़ाली छोड़ने पर वह min से शुरू होता है। रेंज के भीतर का कोई मान, जैसे -50 से 50 तक के बैलेंस कंट्रोल पर 0, सक्रिय ट्रैक को वहाँ से किसी भी ओर बढ़ने देता है। ट्रैक के सिरे अपने स्टॉप बिंदु रखते हैं, इसलिए दोनों सीमाएँ दिखती रहती हैं।

मान इंडिकेटर

valueIndicator हैंडल का मान उसके बग़ल में एक छोटे लेबल में दिखाता है।

मान	मान कब दिखाता है	किसके लिए
`none` (डिफ़ॉल्ट)	कभी नहीं	वे स्लाइडर जिनका असर स्क्रीन पर कहीं और दिखता है: वॉल्यूम, ब्राइटनेस
`active`	जब तक हैंडल दबा हुआ है या उस पर कीबोर्ड फ़ोकस है	वे मान जिन्हें लोगों को सेट करते समय पढ़ना होता है, जहाँ उँगली हैंडल को ढक लेती है
`always`	हर समय	वह मान जो हमेशा पढ़ा जा सकना चाहिए, जब स्लाइडर के बग़ल में आपके अपने टेक्स्ट के लिए जगह न हो

इंडिकेटर आड़े स्लाइडर के हैंडल के ऊपर और खड़े स्लाइडर में इनलाइन शुरुआत की ओर रहता है। जब आप valueText देते हैं तो वह उसे दिखाता है, और वरना प्लैटफ़ॉर्म के लोकेल में संख्या, उतने दशमलव स्थानों के साथ जितने कीबोर्ड के स्टेप में हैं, अधिकतम दो। वह मान को सिर्फ़ दिखाता है: वह न फ़ोकस लेता है, न इनपुट, और स्क्रीन रीडर मान को हैंडल से पढ़ता है।

मान टेक्स्ट

जब अकेली संख्या अस्पष्ट हो, तो valueText में मौजूदा मान के शब्द रखें: “40%”, “3 स्टार”, “$300”। वह मान इंडिकेटर में भी और स्क्रीन रीडर जो कहता है उसमें भी संख्या की जगह लेता है। रेंज में startValueText शुरुआती हैंडल के लिए यही करता है। मान जब भी बदले, इसे अपडेट करें।

एक बार लिखे गए शब्द पहले ही ड्रैग के बाद ग़लत हो जाते हैं। इसलिए स्लाइडर एक फ़ंक्शन भी लेता है, जो मान से उसके शब्द बनाता है और एक ही बार दिया जाता है: हर बदलाव पर स्लाइडर हर हैंडल के लिए उसी फ़ंक्शन से शब्द माँगता है, और जहाँ आपने valueText और startValueText सेट किए हैं, वहाँ वही लागू रहते हैं। वेब पर यह formatValue है, जो प्रॉपर्टी है और ऐट्रिब्यूट कभी नहीं। बाक़ी प्लैटफ़ॉर्म ने इसे अभी इम्प्लीमेंट नहीं किया है।

const dollars = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
document.querySelector('[name="price"]').formatValue = (value) => dollars.format(value);

कहाँ इस्तेमाल होता है: स्लाइडर फ़ील्ड में: फ़ील्ड और स्लाइडर एक कंपोनेंट के रूप में, जिसमें ये शब्द लेबल की पंक्ति के अंत में दिखते हैं। जहाँ भी स्लाइडर को दिखने वाला लेबल, सहायता या त्रुटि चाहिए, वहाँ उसे इस्तेमाल करें।

साइज़ और ओरिएंटेशन

small रोज़मर्रा का स्लाइडर है। medium और large किसी प्रमुख कंट्रोल को, जैसे मीडिया स्क्रीन पर वॉल्यूम या ब्राइटनेस का स्लाइडर, ज़्यादा भारी ट्रैक देते हैं। हर साइज़ न्यूनतम टार्गेट पूरा करता है।

खड़ा स्लाइडर हर लेआउट दिशा में नीचे (min) से ऊपर (max) की ओर चलता है। आड़ा स्लाइडर इनलाइन शुरुआत से चलता है, इसलिए दाएँ से बाएँ वाले लेआउट में min दाईं ओर होता है।

करें

स्लाइडर के बग़ल में अपना दिखने वाला लेबल रखें, label के ही शब्दों में।
व्यक्ति के ड्रैग करते समय मान का असर दिखाएँ, और उसे change पर सेव करें, हर input पर नहीं।
min, max और step ऐसे चुनें कि स्लाइडर जो भी मान ले सकता है, वह ऐसा हो जिसे लोग चाहेंगे।
जब अकेली संख्या यह न बताए कि वह क्या गिन रही है, तो valueText में इकाई दें।

न करें

स्लाइडर को ऐसे मान के लिए इस्तेमाल न करें जिसे लोगों को सटीक सेट करना हो, जैसे कोई तारीख़ या रक़म।
स्लाइडर को ऐसी सेटिंग के लिए इस्तेमाल न करें जो सिर्फ़ चालू या बंद होती है। स्विच इस्तेमाल करें।
बहुत से स्टेप वाले स्लाइडर पर स्टॉप बिंदु न दिखाएँ।
स्लाइडर को टूलबार के भीतर न रखें। उसे वही ऐरो कुंजियाँ चाहिए जिनसे टूलबार फ़ोकस चलाता है।

सुलभता

रोल: slider
लेबलिंग: label names the slider, or a range's end handle; startLabel names a range's start handle. Neither is drawn: a visible label is the product's text beside the slider, in the same words. valueText replaces the spoken number ("40 %", "3 stars"). The tracks, stop dots, state layer and value indicator are decorative.
न्यूनतम टार्गेट: दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया
`Tab / Shift+Tab`	Moves focus to the handle, and for a range to the start handle, then the end handle.
`Right Arrow / Up Arrow`	Increases the focused handle's value by one keyboard step (Right Arrow decreases it in a right-to-left horizontal slider).
`Left Arrow / Down Arrow`	Decreases the value by one keyboard step (Left Arrow increases it in a right-to-left horizontal slider).
`Page Up / Page Down`	Increases or decreases the value by ten keyboard steps.
`Home / End`	Sets the value to the lowest or highest the handle can take.

Each handle is one slider for assistive technology: role slider with aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext and aria-orientation on the web; the adjustable trait with an accessibility value on Apple platforms (a vertical swipe increments and decrements); a range with a current value and the set-progress action on Android; a slider semantics node with increase and decrease actions in Flutter; role adjustable with accessibilityValue and increment and decrement actions in React Native.
A range is two sliders, the WAI-ARIA multi-thumb pattern: each handle's lowest and highest value is bounded by the other handle, so a screen reader announces the range each can still reach.
The value is read from the handle and the active track. The handle must be told apart from each thing it lies on — the track, the active track and the surface behind the slider — by its outline (comp.slider.standard.handle-outline.color, where comp.slider.handle-outline.width is above 0) or by its fill (comp.slider.standard.handle.color), at 3:1 or more; comp.slider.standard.active-track.color must stay at least 3:1 against the track and the surface. In the default system the outline carries it against the track and the surface, and the fill against the active track. A faint track keeps its end visible by the stop dot at the end of the travel (SLD-9).
The handle may be drawn smaller than the minimum target (20 against 48 in the default system): the whole slider takes the press across its axis at the target's size (SLD-7), so every handle keeps its whole target, a range's two handles included, and no target is reported larger than the area that takes the press.
Text size does not change the slider: it has no text of its own except the value indicator, which grows with the text.
How a state looks is a value decision of the active design system; components read the state's tokens and never compute the effect themselves.

इससे जनरेट किया गया: specs/slider.spec.json, tokens/sys/measure.tokens.json

कंपोनेंट क्या सँभालता है

हर हैंडल सहायक तकनीक के लिए एक स्लाइडर है, जिसका नाम label से आता है (या रेंज के शुरुआती हैंडल के लिए startLabel से), अपने मान, अपने मान टेक्स्ट, सबसे कम और सबसे ज़्यादा मान जो वह ले सकता है, अपने ओरिएंटेशन और अपने अक्षम स्टेट के साथ। Apple के प्लैटफ़ॉर्म पर वह एक adjustable एलिमेंट है: खड़ा स्वाइप उसे एक स्टेप चलाता है।
रेंज में दो स्लाइडर होते हैं, यानी WAI-ARIA का multi-thumb पैटर्न। हर हैंडल की सीमाएँ दूसरे हैंडल से बँधी हैं, इसलिए स्क्रीन रीडर वह रेंज पढ़कर सुनाता है जहाँ तक वह हैंडल अब भी पहुँच सकता है।
ट्रैक, स्टॉप बिंदु, स्टेट लेयर और मान इंडिकेटर सहायक तकनीक से छिपे रहते हैं।
हर हैंडल एक Tab स्टॉप है, शुरुआती हैंडल पहले। ऐरो कुंजियाँ एक स्टेप चलाती हैं, Page Up और Page Down दस स्टेप, और Home और End सबसे कम और सबसे ज़्यादा मान पर ले जाती हैं। दाएँ से बाएँ वाले आड़े स्लाइडर में Right Arrow और Left Arrow आपस में बदल जाती हैं।
स्क्रीन रीडर की बढ़ाने और घटाने की क्रियाएँ एक स्टेप चलाती हैं; जहाँ प्लैटफ़ॉर्म इजाज़त देता है, वहाँ सीधे सेट किया गया मान सीमा में बाँधा जाता है और स्टेप पर स्नैप होता है।
स्लाइडर पर कहीं भी दबाने से पास वाला हैंडल वहाँ आ जाता है, और फिर ड्रैग के साथ चलता है। टच पर जो दबाना पहले ट्रैक के आड़े चलता है, वह आसपास के स्क्रॉल व्यू के लिए छोड़ दिया जाता है, ताकि स्लाइडर स्क्रॉल को न पकड़े।
पूरा स्लाइडर हिट एरिया है, और वह ट्रैक के आड़े न्यूनतम टार्गेट तक पहुँचता है। हैंडल टार्गेट से छोटा बनता है, पर इससे हिट एरिया छोटा नहीं होता, इसलिए रेंज का हर हैंडल भी पूरा टार्गेट रखता है।
यह फ़ोकस इंडिकेटर को फ़ोकस वाले हैंडल के चारों ओर सिर्फ़ कीबोर्ड फ़ोकस के लिए दिखाता है।
डिफ़ॉल्ट सिस्टम में हैंडल जिस भी चीज़ पर रहता है, उससे 3:1 या ज़्यादा पर अलग पहचाना जाता है: ट्रैक और पेज के मुक़ाबले अपनी आउटलाइन से, और सक्रिय ट्रैक के मुक़ाबले अपने फ़िल से। सक्रिय ट्रैक, ट्रैक और पेज के मुक़ाबले 3:1 बनाए रखता है, और हल्के ट्रैक का सिरा अपने स्टॉप बिंदु से दिखता रहता है।
अक्षम स्लाइडर पर फ़ोकस नहीं जा सकता, वह कोई मान इंडिकेटर नहीं दिखाता और सहायक तकनीक को अक्षम के रूप में मिलता है।
टेक्स्ट का साइज़ सिर्फ़ मान इंडिकेटर को बदलता है, जो टेक्स्ट के साथ बढ़ता है।
डीबग बिल्ड में ये रिपोर्ट किए जाते हैं: label या startLabel का न होना, रेंज से बाहर या स्टेप से हटा हुआ मान, शुरुआती मान या origin, मान से ऊपर का शुरुआती मान, ऐसा max जो min से ऊपर नहीं है, ऋणात्मक स्टेप, और साइज़, ओरिएंटेशन या मान इंडिकेटर की कोई अनजान सेटिंग।

प्लैटफ़ॉर्म की ज्ञात कमियाँ:

वेब पर हर हैंडल का स्लाइडर रोल शैडो रूट में है, ElementInternals के ज़रिए नहीं, क्योंकि axe-core उस तरह सेट किए गए सिमैंटिक्स नहीं देख सकता। यह <input type="range"> नहीं है, जिसका एक ही हैंडल होता है और जिसके भागों को कोई दो इंजन एक जैसे स्टाइल नहीं करते।
Web: सहायक तकनीक ARIA स्लाइडर को उन ऐरो कुंजियों से बदलती है जो ब्राउज़र उसे भेजता है, इसलिए कोई मान सीधे सेट नहीं किया जा सकता।
Web: मान इंडिकेटर टॉप लेयर में नहीं है। overflow: hidden वाला पूर्वज उसे काट देता है, और बाद में आने वाला, 1 से ऊपर के z-index वाला पोज़िशन्ड सिबलिंग उसे ढक लेता है।
SwiftUI सहायक तकनीक को किसी हैंडल का सबसे कम और सबसे ज़्यादा मान या उसका ओरिएंटेशन नहीं दे सकता, और macOS पर हैंडल सहायक तकनीक के लिए स्लाइडर नहीं है।
SwiftUI टच और पॉइंटर में फ़र्क़ नहीं कर सकता: iOS पर हर दबाना टच है, iPad के पॉइंटर का भी, और macOS पर हर दबाना पॉइंटर का है। iOS 18 से पहले टच का ड्रैग एक SwiftUI जेस्चर है, जिसे स्लाइडर के आसपास का स्क्रॉल व्यू शायद अपने हाथ में न ले सके।
SwiftUI: मान इंडिकेटर विंडो के बजाय स्लाइडर के भीतर रखा जाता है, और स्लाइडर के बाद बनाया गया व्यू उसे ढक सकता है।
SwiftUI: कुंजियाँ नियमों के रूप में टेस्ट की गई हैं, अभी असली कीबोर्ड से नहीं, क्योंकि सिम्युलेटर ऑटोमेशन में कीबोर्ड फ़ोकस नहीं देता।
Compose के स्लाइडर सिमैंटिक्स में ओरिएंटेशन नहीं है, इसलिए हैंडल का ओरिएंटेशन नहीं दिया जाता।
Flutter सहायक तकनीक को किसी हैंडल के लिए न सबसे कम या सबसे ज़्यादा मान देता है, न ओरिएंटेशन, और न मान को सीधे सेट करने की कोई क्रिया।
Flutter संख्या को हमेशा दशमलव सेपरेटर के रूप में . के साथ लिखता है, हर लोकेल में। जहाँ यह मायने रखता हो, वहाँ valueText सेट करें।
Flutter: हिट एरिया ट्रैक के आड़े सिर्फ़ वहीं बढ़ता है जहाँ स्लाइडर का पैरेंट स्लाइडर से बड़ा है। ठीक स्लाइडर के साइज़ का पैरेंट उसे काट देता है।
React Native में न मान को सीधे सेट करने की कोई क्रिया है, न ओरिएंटेशन की कोई प्रॉपर्टी, इसलिए दोनों में से कोई नहीं दिया जाता।
React Native पर ऐरो कुंजियाँ सिर्फ़ वहाँ काम करती हैं जहाँ हार्डवेयर कीबोर्ड जुड़ा है, जैसे टैब की पंक्ति में।
React Native हर दबाने को टच मानता है: माउस या स्टाइलस का दबाना हैंडल को तब तक नहीं चलाता जब तक वह हिल न जाए या ख़त्म न हो जाए।
React Native मान इंडिकेटर को स्लाइडर के भीतर बनाता है, ओवरले लेयर में नहीं, इसलिए वह विंडो के बजाय स्लाइडर के भीतर रहता है, और स्लाइडर के बाद बनाया गया व्यू उसे ढक सकता है।
React Native: लेआउट, ड्रैग और उसका स्क्रॉल व्यू को रास्ता देना, और adjustable हैंडल अभी किसी डिवाइस पर जाँचे नहीं गए हैं।
SwiftUI, Compose, Flutter और React Native अब भी पिछला रूप बनाते हैं: ठोस हैंडल, हर साइज़ के लिए स्टॉप बिंदु का एक ही साइज़, और ट्रैक जो हैंडल के नीचे मिलने के बजाय उस पर कटे होते हैं। जहाँ वे कटते हैं, वहाँ वे ट्रैक को अलग-अलग तरह से ख़त्म करते हैं: SwiftUI पर चौकोर, Flutter और React Native पर एक खाँचे के साथ गोल, और Compose पर हैंडल के शेप में कटा हुआ।
cupertino में सफ़ेद पेज पर सफ़ेद हैंडल का कंट्रास्ट लाइट स्कीम में 1.0:1 है, उस 3:1 से कम जो मान दिखाने वाले भाग को चाहिए। उसकी कोई आउटलाइन नहीं है, जैसा Apple उसे बनाता है, और वह अपनी शैडो से और बग़ल के टिंट वाले सक्रिय ट्रैक से अलग पहचाना जाता है; कोई इनवेरिएंट हैंडल को पेज के मुक़ाबले नहीं जाँचता। यह 1.0:1 जानकारी के तौर पर रखा गया माप है: नक़ल करने वाले प्रीसेट पर Tanrei के सुलभता मानदंड लागू नहीं होते। cupertino में स्लाइडर कोई स्टॉप बिंदु भी नहीं बनाता, ट्रैक के सिरों पर भी नहीं।
m3-like में स्लाइडर Material की खड़ी पट्टी बनाता है, Material के प्रकाशित मापों से। वे अभी फ़िडेलिटी के रेफ़रेंस से जाँचे नहीं गए हैं। m3-expressive-like में उस ग्लिफ़ की कोई जगह नहीं है जो Material मोटे ट्रैक के भीतर बनाता है (मिमिक्री गैप slider-inset-icon): अपना आइकन स्लाइडर के बग़ल में रखें।

आपको क्या करना है

हर स्लाइडर को label दें, और रेंज को startLabel भी, अपने प्रॉडक्ट की भाषा में। वही शब्द उसके बग़ल में दिखने वाले लेबल के रूप में दिखाएँ।
जब अकेली संख्या अस्पष्ट हो, तो valueText सेट करें, और उसे मान के साथ-साथ बदलते रहें।
बदलाव का नतीजा ऐसी जगह दिखाएँ जहाँ लोग उसे देख सकें, और अगर कोई बदलाव लागू नहीं हो सका तो उन्हें टेक्स्ट में बताएँ। स्लाइडर सिर्फ़ अपना मान पढ़कर सुनाता है।
cupertino में, जहाँ हैंडल सफ़ेद है और ट्रैक के सिरों पर बिंदु नहीं हैं, जहाँ हो सके स्लाइडर को सादी सफ़ेद सरफ़ेस से दूर रखें।
सबसे ऊँचे कंटेनर टोन वाली सरफ़ेस पर, जैसे भरे हुए कार्ड पर, निष्क्रिय ट्रैक मुश्किल से दिखता है: उसका टोन लगभग वही है। जहाँ स्लाइडर ऐसी सरफ़ेस पर हो, वहाँ एक लेयर में comp.slider.standard.track.color को किसी ज़्यादा गहरे रोल पर ले जाएँ। हैंडल और सक्रिय ट्रैक तब भी मान दिखाते हैं।
वेब पर, स्लाइडर का मान फ़ॉर्म के साथ सबमिट करने के लिए उसे name दें।

GitHub पर सोर्स कोड और इश्यू