Search completed in 1.31 seconds.
Using the slider role - Accessibility
this technique demonstrates how to use the
slider role and describes the effect it has on browsers and assistive technology.
... the
slider role is used for markup that allows a user to select a value from within a given range.
... the
slider role is assigned to the "thumb," the control that is adjusted to change the value.
...And 8 more matches
::-webkit-slider-thumb - CSS: Cascading Style Sheets
the ::-webkit-
slider-thumb css pseudo-element represents the "thumb" that the user can move within the "groove" of an <input> of type="range" to alter its numerical value.
... syntax ::-webkit-
slider-thumb specifications not part of any standard.
Linear-gradient Generator - CSS: Cascading Style Sheets
linear-gradient generator html content <div id="container"> <div id="gradient-container" data-alpha="true"> </div> <div id="controls"> <div class="section"> <div class="title"> active point </div> <div class="property"> <div class="ui-input-
slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> ...
...<div class="ui-dropdown" data-topic="axis-unit" data-selected="1"> <div data-value='px'> pixels (px) </div> <div data-value='%'> percentage (%) </div> </div> <div id="delete-axis" class="button"> delete line </div> </div> <div class="property"> <div class="ui-
slider" data-topic="axis-rotation" data-info="rotation" data-min="-180" data-value="0" data-max="180"></div> </div> </div> <div id="tool-section" class="section"> <div class="title"> tool settings </div> <div class="property"> <div class="name"> alpha background </div> ...
....66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("images/alpha_mask.png"); } .ui-color-picker .
slider-picker { width: 2px; height: 100%; margin: 0 0 0 -2px; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height:...
...And 33 more matches
Border-image generator - CSS: Cascading Style Sheets
te-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-
slider" data-topic="scale" data-unit="%" data-max="300" data-sensivity="10"> </div> </div> <div class="separator"></div> <div class="property"> <div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </div> <div class="property right"> ...
... <div class="name">section height</div> <div class="ui-input-
slider" data-topic="preview-area-height" data-min="400" data-max="1000"> </div> </div> </div> <div id="preview_section" class="group section"> <div id="subject"> <div class="guideline" data-axis="y" data-topic="slice-top"></div> <div class="guideline" data-axis="x" data-topic="slice-right"></div> <div class="guideline" data-axis="y" data-topic="slice-bottom"></div> <div class="guideline" data-axis="x" data-topic="slice-left"></div> </div> <div id="preview"> </div> </div> <!-- controls --> <div id="controls" class="group sect...
... <div class="ui-dropdown border-repeat" data-topic="image-repeat-y" data-selected="2"> <div data-value="1">repeat</div> <div data-value="1">stretch</div> <div data-value="1">round</div> </div> </div> <div class="property"> <div class="ui-input-
slider" data-topic="font-size" data-info="em size" data-unit="px" data-value="12" data-sensivity="3"> </div> </div> <div class="property"> <div class="ui-input-
slider" data-topic="preview-width" data-info="width" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div...
...And 32 more matches
Box-shadow generator - CSS: Cascading Style Sheets
ta-title='' data-action="hexa"></div> </div> </div> </div> </div> <div class="wrap-right"> <div id="shadow_properties" class="category"> <div class="title"> shadow properties </div> <div class="group"> <div class="group property"> <div class="ui-
slider-name"> inset </div> <div class="ui-checkbox" data-topic='inset'></div> </div> <div class="
slidergroup"> <div class="ui-
slider-name"> position x </div> <div class="ui-
slider-btn-set" data-topic="posx" data-type="sub"></div> <div class="ui-
slider" data-topic="posx"...
... data-min="-500" data-max="500" data-step="1"> </div> <div class="ui-
slider-btn-set" data-topic="posx" data-type="add"></div> <div class="ui-
slider-input" data-topic="posx" data-unit="px"></div> </div> <div class="
slidergroup"> <div class="ui-
slider-name"> position y </div> <div class="ui-
slider-btn-set" data-topic="posy" data-type="sub"></div> <div class="ui-
slider" data-topic="posy" data-min="-500" data-max="500" data-step="1"> </div> <div class="ui-
slider-btn-set" data-topic="posy" data-type="add"></div> <div class="ui-
slider-input" ...
...data-topic="posy" data-unit="px"></div> </div> <div class="
slidergroup"> <div class="ui-
slider-name"> blur </div> <div class="ui-
slider-btn-set" data-topic="blur" data-type="sub"></div> <div class="ui-
slider" data-topic="blur" data-min="0" data-max="200" data-step="1"> </div> <div class="ui-
slider-btn-set" data-topic="blur" data-type="add"></div> <div class="ui-
slider-input" data-topic="blur" data-unit="px"></div> </div> <div class="
slidergroup"> <div class="ui-
slider-name"> spread </div> <div class="ui-
slider-btn-set" data-...
...And 22 more matches
Border-radius generator - CSS: Cascading Style Sheets
dius-container" data-x="right" data-y="top"> </div> <div id="bottom-right" class="radius-container" data-x="right" data-y="bottom"> </div> <div id="bottom-left" class="radius-container" data-x="left" data-y="bottom"> </div> <div id="radius-ui-
sliders"> <div id="tlr" class="ui-input-
slider" data-topic="top-left" data-unit=" px" data-sensivity="2"></div> <div id="tlw" class="ui-input-
slider" data-topic="top-left-w" data-unit=" px" data-sensivity="2"></div> <div id="tlh" class="ui-input-
slider" data-topic="top-left-h" ...
... data-unit=" px" data-sensivity="2"></div> <div id="trr" class="ui-input-
slider" data-topic="top-right" data-unit=" px" data-sensivity="2"></div> <div id="trw" class="ui-input-
slider" data-topic="top-right-w" data-unit=" px" data-sensivity="2"></div> <div id="trh" class="ui-input-
slider" data-topic="top-right-h" data-unit=" px" data-sensivity="2"></div> <div id="brr" class="ui-input-
slider" data-topic="bottom-right" data-unit=" px" data-sensivity="2"></div> <div id="brw" class="ui-input-
slider" data-topic="bottom-right-w" data-unit=" px" data-sensivity="2"></div> ...
... <div id="brh" class="ui-input-
slider" data-topic="bottom-right-h" data-unit=" px" data-sensivity="2"></div> <div id="blr" class="ui-input-
slider" data-topic="bottom-left" data-unit=" px" data-sensivity="2"></div> <div id="blw" class="ui-input-
slider" data-topic="bottom-left-w" data-unit=" px" data-sensivity="2"></div> <div id="blh" class="ui-input-
slider" data-topic="bottom-left-h" data-unit=" px" data-sensivity="2"></div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="group section"> <div id="dimensions"> ...
...And 20 more matches
Color picker tool - CSS: Cascading Style Sheets
de="hsl"></div> <div id="picker-samples" sample-id="master"></div> <div id="controls"> <div id="delete"> <div id="trash-can"></div> </div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-
slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picki...
...d: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); } .ui-color-picker .alpha-mask { width: 100%; height: 100%; background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); } .ui-color-picker .
slider-picker { width: 2px; height: 100%; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; ...
...a(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-color-picker .switch_mode { width: 10px; height: 20px; position: relative; border-radius: 5px 0 0 5px; border: 1px solid #ddd; background-color: #eee; left: -12px; top: -1px; z-index: 1; transition: all 0.5s; } .ui-color-picker .switch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-
slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-
slider * { float: left; height: 100%; line-height: 100%; } /* input
slider */ .ui-input-
slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-in...
...And 19 more matches
Index - Archive of obsolete content
1900 scale xul elements, xul reference a scale (sometimes referred to as a "
slider") allows the user to select a value from a range.
... 2126 -ms-scrollbar-highlight-color css, css property, css:microsoft extentions, deprecated, non-standard, reference, recipe:css-property the -ms-scrollbar-highlight-color css property is a microsoft extension that specifies the color of the
slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.
... 2151 ::-ms-fill-lower css, needsbrowsercompatibility, needsexample, needsmobilebrowsercompatibility, non-standard, pseudo-element, reference, selector the ::-ms-fill-lower css pseudo-element represents the lower portion of the track of a
slider control; that is, the portion corresponding to values less than the value currently selected by the thumb.
...And 13 more matches
<input type="range"> - HTML: Hypertext Markup Language
this is typically represented using a
slider or dial control rather than a text entry box like the number input type.
... non standard attributes attribute description orient sets the orientation of the range
slider.
... orient similar to the -moz-orient non-standard css property impacting the <progress> and <meter> elements, the orient attribute defines the orientation of the range
slider.
...And 9 more matches
CSS - Archive of obsolete content
adow-color css property is a microsoft extension that specifies the color of a scroll bar's gutter.-ms-scrollbar-face-colorthe -ms-scrollbar-face-color css property is a microsoft extension that specifies the color of the scroll box and scroll arrows of a scroll bar.-ms-scrollbar-highlight-colorthe -ms-scrollbar-highlight-color css property is a microsoft extension that specifies the color of the
slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.-ms-scrollbar-shadow-colorthe -ms-scrollbar-shadow-color css property is a microsoft extension that specifies the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.-ms-scrollbar-track-colorthe -ms-scrollbar-track-color css property is a microsoft extension that specifies the...
...typically it is a triangle that points downward.::-ms-fillthe ::-ms-fill css pseudo-element is a microsoft extension that represents a progress bar displayed by <progress>.::-ms-fill-lowerthe ::-ms-fill-lower css pseudo-element represents the lower portion of the track of a
slider control; that is, the portion corresponding to values less than the value currently selected by the thumb.
... a
slider control is one possible representation of <input type="range">.::-ms-fill-upperthe ::-ms-fill-upper css pseudo-element is a microsoft extension that represents the upper portion of the track of a
slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb.
...And 7 more matches
The HTML5 input types - Learn web development
slider controls another way to pick a number is to use a
slider.
...let's look at a live example to illustrate this: usage-wise,
sliders are less accurate than text fields.
... a
slider is created using the <input> with its type attribute set to the value range.
...And 5 more matches
ARIA Test Cases - Accessibility
sults: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - -
slider single
slider slider using in-line images for thumb dojo nightly build simple
slider pretty
slider mindtrove rating widget paciello group
slider expected at behavior: the user can navigate to the
slider control in all modes.
... when the user navigates to the
slider, the screen reader should announce the label, role and position of the
slider.
... when not in a virtual buffer mode, the user can control the
slider using keys such as the arrow keys, home and end.
...And 5 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
syntax /* css basic user interface module level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance:
slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance: media-mute...
... searchfield div { color: black; -moz-appearance: searchfield; -webkit-appearance: searchfield; } <div>lorem</div> firefox chrome safari edge
slider-horizontal div{ color: black; -webkit-appearance:
slider-horizontal; } <div>lorem</div> chrome safari edge square-button div{ color: black; -moz-appearance: square-button; -webkit-appearance: square-button; } <div>lorem</div> chrome safari edge textarea div{ color: black; -webkit-appearance: ...
...i edge media-enter-fullscreen-button div{ color: black; -webkit-appearance: media-enter-fullscreen-button; } <div>lorem</div> chrome safari media-exit-fullscreen-button div{ color: black; -webkit-appearance: media-exit-fullscreen-button; } <div>lorem</div> chrome safari media-fullscreen-volume-
slider div{ color: black; -moz-appearance: media-fullscreen-volume-
slider; -webkit-appearance: media-fullscreen-volume-
slider; } <div>lorem</div> safari media-fullscreen-volume-
slider-thumb div{ color: black; -moz-appearance: media-fullscreen-volume-
slider-thumb; -webkit-appearance: media-fullscreen-volume-
slider-thumb; } <div>lorem</div>...
...And 4 more matches
Example and tutorial: Simple synth keyboard - Web APIs
the keyboard allows you to switch among the standard waveforms as well as one custom waveform, and you can control the master gain using a volume
slider beneath the keyboard.
...the range element will typically be presented as a
slider control; we configure it to allow any value between 0.0 and 1.0, stepping by 0.01 each position.
... mastergainnode is set to null; during the setup process, it will be configured to contain a gainnode which all playing oscillators will connect to and play through to allow the overall volume to be controlled using a single
slider control.
...And 3 more matches
Using the aria-valuenow attribute - Accessibility
the aria-valuenow attribute is used to define the current value for a range widget such as a
slider, spinbutton or progressbar.
...for example, a
slider may have rendered values of small, medium, and large.
... aria-valuenow is a required attribute of role
slider, scrollbar and spinbutton.
...And 3 more matches
Accessibility documentation index - Accessibility
26 using the aria-valuemax attribute aria, accessibility the aria-valuemax attribute is used to define the maximum value allowed for a range widget such as a
slider, spinbutton or progressbar.
... 27 using the aria-valuemin attribute aria, accessibility, needscontent the aria-valuemin attribute is used to define the minimum value allowed for a range widget such as a
slider, spinbutton or progressbar.
... 28 using the aria-valuenow attribute aria, accessibility, needscontent the aria-valuenow attribute is used to define the current value for a range widget such as a
slider, spinbutton or progressbar.
...And 3 more matches
textLength - SVG: Scalable Vector Graphics
html the html is also simple, with only two displayed elements contained inside a grouping <div>: <div class="controls"> <input type="range" id="width
slider" min="80" max="978"> <span id="widthdisplay"></span> </div> the <input> element, of type "range", is used to create the
slider control the user will manipulate to change the width of the text.
...it starts by stashing references to the elements it will need to access, using document.getelementbyid(): const width
slider = document.getelementbyid("width
slider"); const widthdisplay = document.getelementbyid("widthdisplay"); const textelement = document.getelementbyid("hello"); const baselength = math.floor(textelement.textlength.baseval.value); width
slider.value = baselength; width
slider.addeventlistener("input", function(event) { textelement.textlength.baseval.newvaluespecifiedunits( svglength.svg_lengthtype_px, width
slider.valueasnumber); widthdisplay.innertext = width
slider.value; }, false); width
slider.dispatchevent(new event...
...("input")); after fetching the element references, an eventlistener is established by calling addeventlistener() on the
slider control, to receive any input events which occur.
...And 3 more matches
Using the aria-valuetext attribute - Accessibility
the aria-valuetext attribute is used to define the human readable text alternative of aria-valuenow for a range widget such as progressbar, spinbutton or
slider.
...for example, a
slider may have rendered values of small, medium, and large.
... examples example 1: the snippet below shows a simple
slider for selecting a day of the week.
...And 2 more matches
<filter-function> - CSS: Cascading Style Sheets
examples filter function comparison this example provides a simple graphic, along with a select menu to allow you to choose between the different types of filter function, and a
slider to allow you to vary the values used inside the filter function.
...3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); const
slider = document.queryselector('input'); const output = document.queryselector('output'); const curvalue = document.queryselector('p code'); selectelem.addeventlistener('change', () => { set
slider(selectelem.value); setdiv(selectelem.value); });
slider.addeventlistener('input', () => { setdiv(selectelem.value); }); function set
slider(filter) { if(filter === 'blur') {
slider.value = 0; ...
...
slider.min = 0;
slider.max = 30;
slider.step = 1;
slider.setattribute('data-unit', 'px'); } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') {
slider.value = 1;
slider.min = 0;
slider.max = 4;
slider.step = 0.05;
slider.setattribute('data-unit', ''); } else if(filter === 'drop-shadow') {
slider.value = 0;
slider.min = -20;
slider.max = 40;
slider.step = 1;
slider.setattribute('data-unit', 'px'); } else if(filter === 'opacity') {
slider.value = 1;
slider.min = 0;
slider.max = 1;
slider.step = 0.01;
slider.setattribute('data-unit', ''); } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') {
slider.value = 0;
slider.min = 0;
slider.max = 1; sl...
...And 2 more matches
Mobile accessibility - Learn web development
when you've found the talkback menu, press the
slider switch to turn talkback on.
... if you want to turn talkback off: navigate back to the talkback menu screen (using the different gestures that are currently enabled.) navigate to the
slider switch and activate it to turn it off.
...press the voiceover
slider to enable it (you'll also see a number of other options related to voiceover on this page).
... to turn it off again, navigate back to settings > general > accessibility > voiceover using the above gestures, and toggle the voiceover
slider back to off.
Test your skills: HTML5 controls - Learn web development
html5 controls 2 next, we want you to implement a
slider control to allow the user to choose a maximum number of people to invite to their party.
... implement a basic
slider control to go along with the provided label.
... create a corresponding output element to put the current value of the
slider into.
...if you do this correctly, the javascript included on the page will automatically update the output value when the
slider is moved.
Edit fonts - Firefox Developer Tools
you can select values using the
slider or enter a numeric value directly into the text box.
...you can select values using the
slider or enter a numeric value directly into the text box.
... you can select values using the
slider or enter a numeric value directly into the text box.
... for non-variable fonts the
slider ranges from 100 to 900 in increments of 100.
BaseAudioContext.createStereoPanner() - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio> element along with a
slider <input> to increase and decrease pan value.
...we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the
slider is moved.
... moving the
slider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively.
...anning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the
slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifica...
StereoPannerNode.pan - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio> element along with a
slider <input> to increase and decrease pan value.
...we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the
slider is moved.
... moving the
slider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively.
...anning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the
slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifica...
StereoPannerNode - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio> element along with a
slider <input> to increase and decrease pan value.
...we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the
slider is moved.
... moving the
slider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively.
...anning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the
slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifica...
Controlling multiple parameters with ConstantSourceNode - Web APIs
then we get references to the control widgets, setting playbutton to reference the play button and volumecontrol to reference the
slider control that the user will use to adjust the gain on the linked pair of oscillators.
... then we assign a handler for the play button's click event (see toggling the oscillators on and off for more on the toggleplay() method), and for the volume
slider's input event (see controlling the linked oscillators to see the very short changevolume() method).
...we also create gainnode2 and gainnode3, setting their values to match gainnode1, then set the value of the volume
slider to the same value, so it is synchronized with the gain level it controls.
... controlling the linked oscillators the changevolume() function—the event handler for the
slider control for the gain on the linked oscillator pair—looks like this: function changevolume(event) { constantnode.offset.value = volumecontrol.value; } that simple function controls the gain on both nodes.
Using the aria-valuemax attribute - Accessibility
description the aria-valuemax attribute is used to define the maximum value allowed for a range widget such as a
slider, spinbutton or progressbar.
... aria-valuemax is a required attribute of role
slider, scrollbar and spinbutton.
... examples example 1: the snippet below shows a simple
slider with a maximum value of 10.
... <div role="
slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example
slider example spinbutton example notes used with aria roles progressbar scrollbar
slider spinbutton related aria techniques aria-valuemin aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuemax attribute ...
Using the aria-valuemin attribute - Accessibility
the aria-valuemin attribute is used to define the minimum value allowed for a range widget such as a
slider, spinbutton or progressbar.
... aria-valuemin is a required attribute of role
slider, scrollbar and spinbutton.
... examples example 1: the snippet below shows a simple
slider with a minimum value of 1.
... <div role="
slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example
slider example spinbutton example notes used with aria roles progressbar scrollbar
slider spinbutton related aria techniques aria-valuemax aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuemin attribute ...
Anonymous Content - Archive of obsolete content
declaring scrollbar example the example below shows how a scrollbar might be declared (it has been simplified a bit from the real thing): <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="scrollbarbinding"> <content> <xul:scrollbarbutton type="decrement"/> <xul:
slider flex="1"> <xul:thumb/> </xul:
slider> <xul:scrollbarbutton type="increment"/> </content> </binding> </bindings> this file contains a single binding, declared with the binding element.
...the result of using the above binding is that the line of xul below will be expanded as follows, assuming that the scrollbar is bound to the xbl above: <scrollbar/> expands to: <scrollbar> <xul:scrollbarbutton type="decrement"/> <xul:
slider flex="1"> <xul:thumb/> </xul:
slider> <xul:scrollbarbutton type="increment"/> </scrollbar> the elements within the content tag are added to the scroll bar anonymously.
...if you look at a scroll bar in a mozilla window, you will see that it is made up of an arrow button, a
slider, a thumb inside it and a second arrow button at the end, which are the elements that appear in the xbl above.
::-ms-fill-upper - Archive of obsolete content
the ::-ms-fill-upper css pseudo-element is a microsoft extension that represents the upper portion of the track of a
slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb.
... a
slider control is one possible representation of <input type="range">.
... see also ::-ms-fill-lower ::-ms-track ::-ms-thumb ::-moz-range-progress css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting
sliders ...
::-ms-thumb - Archive of obsolete content
the ::-ms-thumb css pseudo-element is a microsoft extension that represents the thumb that the user moves within the track of a
slider control to alter its numerical value.
... a
slider control is one possible representation of <input type="range">.
... see also ::-ms-track ::-ms-fill-upper ::-ms-fill-lower ::-webkit-
slider-thumb ::-moz-range-thumb css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting
sliders ...
::-ms-track - Archive of obsolete content
the ::-ms-track css pseudo-element is a microsoft extension that represents the track of a
slider control.
... a
slider control is one possible representation of <input type="range">.
... height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-
slider-runnable-track ::-moz-range-track css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting
sliders ...
Accessibility API cross-reference
select (abstract role) a line that splits 2 areas from each other separator (either in menu or splits panes) separator (in menu only) separator separator <hr> adjust in increments from min to max values
slider slider slider slider <input type=range> a system sound sound n/a n/a n/a no default semantics in html, but semantics and other accessibility features may be provided with aria.
...ui controls, see armed focused focused focused available to javascript as document.activeelement appearance has changed for mouseover hottracked n/a n/a especially used for
sliders, scrollbars, toolbars, tablists...
... unavailable enabled n/a aria-disabled=true disabled (boolean attribute) especially used for
sliders and scrollbars n/a vertical vertical aria-orientation=vertical accessible events msaa event (event_object_*, event_system_*) java accessibility event gnome accessibility signals mac os x accessibility event description & notes javascript relevant xul focus focus, focusin ...
Gecko info for Windows accessibility vendors
event_valuechange is fired for
sliders, progress meters and other objects who's get_accvalue() may change.
...be prepared for new combinations of roles and states in content, such as role_
slider, role_progressbar and state_required.
... role_dial not supported n/a role_hotkeyfield not supported n/a role_
slider xul: <
slider> dhtml: role="wairole:
slider" fires event_valuechange when
slider moves.
An overview of accessible web applications and widgets - Accessibility
sliders, menu bars, file list views, and more can be built with a combination of javascript, css, and html.
...roles describe widgets that aren't otherwise available in html 4, such as
sliders, menu bars, tabs, and dialogs.
...so an element with role="
slider" will be controlled in the same way as a native
slider is controlled on the operating system.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
try to use unique names for each item in a dialog so that voice dictation software doesn't have to deal with extra ambiguity.[important] get_accvalue: get the "value" of the iaccessible, for example a number in a
slider, a url for a link, the text a user entered in a field.
...ct_selectionadd [important for multiple selection] event_object_selectionremove [important for multiple selection] event_object_selectionwithin [important for multiple selection] event_object_statechange [important for checkboxes and radio buttons] event_object_locationchange event_object_namechange event_object_descriptionchange event_object_valuechange [important for
sliders and progress meters] event_object_parentchange event_object_helpchange event_object_defactionchange event_object_acceleratorchange msaa states cheat sheet for information on what each state does, see the msdn state constants page.
...role_pagetab [important] role_propertypage [important] role_indicator role_graphic [important] role_statictext [important] role_text [important] role_pushbutton [important] role_checkbutton [important] role_radiobutton [important] role_combobox [important] role_droplist [important] role_progressbar [important] role_dial role_hotkeyfield role_
slider role_spinbutton role_diagram role_animation role_equation role_buttondropdown role_buttonmenu role_buttondropdowngrid role_whitespace role_pagetablist [important] role_clock role_splitbutton role_ipaddress role_nothing msaa object identifiers cheat sheet for information on what each object identifier does, see the msdn object identifier...
border-image-slice - CSS: Cascading Style Sheets
however, we have also provided two
sliders to allow you to dynamically change the values of the above two properties, allowing you to appreciate the effect they have: border-image-slice changes the size of the image slice sampled for use in each border and border corner (and the content area, if the fill keyword is used) — varying this away from 30 causes the border to look somewhat irregular, but can have some interesting effects.
...ut id="slice-output">30</output> </li> </ul> css .wrapper { width: 400px; height: 300px; } div > div { width: 300px; height: 200px; border-width: 30px; border-style: solid; border-image: url(https://udn.realityripple.com/samples/56/bb98f533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: center; } javascript const width
slider = document.getelementbyid('width'); const slice
slider = document.getelementbyid('slice'); const widthoutput = document.getelementbyid('width-output'); const sliceoutput = document.getelementbyid('slice-output'); const divelem = document.queryselector('div > div'); width
slider.addeventlistener('input', () => { const newvalue = width
slider.value + 'px'; divelem.style.borderwidth = newvalue; ...
...widthoutput.textcontent = newvalue; }) slice
slider.addeventlistener('input', () => { const newvalue = slice
slider.value; divelem.style.borderimageslice = newvalue; sliceoutput.textcontent = newvalue; }) result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-slice' in that specification.
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
figure 21: a textbox for numeric input
sliders the scale element is used similarly to the volume
slider in windows, allowing the user to vary a value by moving a
slider up/down or left/right (see listing 28 and figure 22).
... note: although this control is also known as a
slider, the
slider element already exists in xul as a part of a scrollbar, so this element has been named "scale".
-ms-scrollbar-highlight-color - Archive of obsolete content
the -ms-scrollbar-highlight-color css property is a microsoft extension that specifies the color of the
slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.
... initial valuethreedhighlightapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the
slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.
::-ms-fill-lower - Archive of obsolete content
the ::-ms-fill-lower css pseudo-element represents the lower portion of the track of a
slider control; that is, the portion corresponding to values less than the value currently selected by the thumb.
... a
slider control is one possible representation of <input type="range">.
::-ms-ticks-after - Archive of obsolete content
the ::-ms-ticks-after css pseudo-element is a microsoft extension that applies one or more styles to the tick marks that appear after the track of a
slider control.
... a
slider control is one possible representation of <input type="range">.
::-ms-ticks-before - Archive of obsolete content
the ::-ms-ticks-before css pseudo-element is a microsoft extension that applies one or more styles to the tick marks that appear before the track of a
slider control.
... a
slider control is one possible representation of <input type="range">.
::-ms-tooltip - Archive of obsolete content
the ::-ms-tooltip css pseudo-element is a microsoft extension that represents the tooltip of a
slider control.
... a
slider control is one possible representation of <input type="range">.
XForms Range Element - Archive of obsolete content
representations the xforms range element is represented by a
slider widget (xhtml only).
... characteristics analogous widget is <xul:scale/>, which is available in fx 3.0 only if the incremental attribute has the value true, the value of the bound node will be updated upon each movement of the
slider's thumb.
WAI-ARIA basics - Learn web development
as another example, apps started to feature complex controls like date pickers for choosing dates,
sliders for choosing values, etc.
... guiding users through complex widgets there are a whole host of other roles that can identify non-semantic element structures as common ui features that go beyond what's available in standard html, for example combobox,
slider, tabpanel, tree.
Introduction to web APIs - Learn web development
t(); next, we create constants that store references to our <audio>, <button>, and <input> elements, and use the audiocontext.createmediaelementsource() method to create a mediaelementaudiosourcenode representing the source of our audio — the <audio> element will be played from: const audioelement = document.queryselector('audio'); const playbtn = document.queryselector('button'); const volume
slider = document.queryselector('.volume'); const audiosource = audioctx.createmediaelementsource(audioelement); next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing: // play/pause audio playbtn.addeventlistener('click', function() { // check if context is...
... next, we create a gainnode object using the audiocontext.creategain() method, which can be used to adjust the volume of audio fed through it, and create another event handler that changes the value of the audio graph's gain (volume) whenever the
slider value is changed: const gainnode = audioctx.creategain(); volume
slider.addeventlistener('input', function() { gainnode.gain.value = this.value; }); the final thing to do to get this to work is to connect the different nodes in the audio graph up, which is done using the audionode.connect() method available on every node type: audiosource.connect(gainnode).connect(audioctx.destination); t...
Accessible Toolkit Checklist
get_accvalue: get the "value" of the iaccessible, for example a number in a
slider, a url for a link, the text a user entered in a field.
... in autocomplete text fields, make sure that the left or right arrow closes the popup and starts moving through the text letter by letter msaa support, including accessible value that holds text, protected for password fields and readonly for read-only fields checkboxes space bar to toggle msaa support, including checkbox state and statechange event
sliders keyboard support for moving
slider: arrow keys, home, end, pgup, pgdn msaa support including role_
slider, accessible value, value change events progress bars msaa support including accessible name, value, name and value change events grouped navigation widgets menus arrow keys, enter, escape alt alone enters main menu after...
Gecko object attributes
value attributes valuetext a text equivalent to the current value, such as "high" in a
slider or "unzipping files" in a progress meter.
... applied to: anything that supports the value interface, especially a
slider or progress meter ...
nsIAccessibleRole
role_
slider 51 represents a
slider, which allows the user to adjust a setting in given increments between minimum and maximum values.
... it is used by xul:scale, role="
slider", xforms:range.
AudioBufferSourceNode.loop - Web APIs
buttons are provided to play and stop the audio playback, and a
slider control is used to change the playbackrate property value on the fly.
...udioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range
slider control play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } specification specification status comment web audio apithe definition of 'loop' in that specification.
AudioBufferSourceNode.playbackRate - Web APIs
buttons are provided to play and stop the audio playback, and a
slider control is used to change the playbackrate property value on the fly.
...udioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range
slider control play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); playbackcontrol.setattribute('disabled', 'disabled'); } playbackcontrol.oninput = function() { source.playbackrate.value = playbackcontrol.value; ...
ConstantSourceNode.offset - Web APIs
gainnode2 = context.creategain(); gainnode3 = context.creategain(); gainnode2.gain.value = gainnode3.gain.value = 0.5; volume
slidercontrol.value = gainnode2.gain.value; constantsource = context.createconstantsource(); constantsource.connect(gainnode2.gain); constantsource.connect(gainnode3.gain); first, the gain nodes are created and configured, and a
slider control's value is set to match the gain on the two nodes.
...with the linkage above in place, that can be done using this simple event handler: function handleclickevent(event) { volume
slidercontrol.value = constantsource.offset.value; } all this function has to do is fetch the current value of the
slider control we're using to control the paired nodes' gains, then store that value into the constantsourcenode's offset parameter.
ConstantSourceNode - Web APIs
example in the article controlling multiple parameters with constantsourcenode, a constantsourcenode is created to allow one
slider control to change the gain on two gainnodes.
... the three nodes are set up like this: gainnode2 = context.creategain(); gainnode3 = context.creategain(); gainnode2.gain.value = gainnode3.gain.value = 0.5; volume
slidercontrol.value = gainnode2.gain.value; constantnode = context.createconstantsource(); constantnode.connect(gainnode2.gain); constantnode.connect(gainnode3.gain); constantnode.start(); gainnode2.connect(context.destination); gainnode3.connect(context.destination); this code starts by creating the gain nodes and setting them and the volume control that will adjust their value all to 0.5.
Element.releasePointerCapture() - Web APIs
html <div id="
slider">slide me</div> css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) {
slider.onpointermove = slide;
slider.setpointercapture(e.pointerid); } function stopsliding(e) {
slider.onpointermove = null;
slider.releasepointercapture(e.pointerid); } function slide(e) {
slider.
...style.transform = `translate(${e.clientx - 70}px)`; } const
slider = document.getelementbyid('
slider');
slider.onpointerdown = beginsliding;
slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of 'releasepointercapture' in that specification.
Element.setPointerCapture() - Web APIs
html <div id="
slider">slide me</div> css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) {
slider.onpointermove = slide;
slider.setpointercapture(e.pointerid); } function stopsliding(e) {
slider.onpointermove = null;
slider.releasepointercapture(e.pointerid); } function slide(e) {
slider.
...style.transform = `translate(${e.clientx - 70}px)`; } const
slider = document.getelementbyid('
slider');
slider.onpointerdown = beginsliding;
slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of 'setpointercapture' in that specification.
ResizeObserver - Web APIs
examples in the resize-observer-text.html (see source) example, we use the resize observer to change the font-size of a header and paragraph as a
slider’s value is changed causing the containing <div> to change width.
... the javascript looks like so: const h1elem = document.queryselector('h1'); const pelem = document.queryselector('p'); const divelem = document.queryselector('body > div'); const
slider = document.queryselector('input[type="range"]'); const checkbox = document.queryselector('input[type="checkbox"]'); divelem.style.width = '600px';
slider.addeventlistener('input', () => { divelem.style.width =
slider.value + 'px'; }) const resizeobserver = new resizeobserver(entries => { for (const entry of entries) { if (entry.contentboxsize) { h1elem.style.fontsize = math.max(1...
Using the aria-orientation attribute - Accessibility
examples example 1: the snippet below shows a simple
slider that is oriented vertically.
... <a href="#" id="handle_zoom
slider" role="
slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="17" aria-valuenow="14" > <span>11</span> </a> working examples:
slider example notes used with aria roles scrollbar listbox combobox menu tree separator
slider tablist toolbar related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-orientation attribute ...
WebKit CSS extensions - CSS: Cascading Style Sheets
ton ::-webkit-media-controls-overlay-enclosure ::-webkit-media-controls-panel ::-webkit-media-controls-play-button ::-webkit-media-controls-timeline ::-webkit-media-controls-time-remaining-display ::-webkit-media-controls-toggle-closed-captions-button ::-webkit-media-controls-volume-control-container ::-webkit-media-controls-volume-control-hover-background ::-webkit-media-controls-volume-
slider ::-webkit-meter-bar ::-webkit-meter-even-less-good-value ::-webkit-meter-inner-element ::-webkit-meter-optimum-value ::-webkit-meter-suboptimum-value -webkit-media-text-track-container ::-webkit-outer-spin-button ::-webkit-progress-bar ::-webkit-progress-inner-element ::-webkit-progress-value ::-webkit-search-cancel-button ::-webkit-search-results-button ::-webkit-
slider-runnable-tra...
...ck ::-webkit-
slider-thumb note: generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid.
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
orient sets the orientation of the range
slider.
... implicit aria role type=button: button type=checkbox: checkbox type=email with no list attribute: textbox with list attribute: combobox type=image: button type=number: spinbutton type=radio: radio type=range:
slider type=reset: button type=search with no list attribute: searchbox with list attribute: combobox type=submit: button type=tel with no list attribute: textbox with list attribute: combobox type=text with no list attribute: textbox with list attribute: combobox type=url with no list attribute:...
HTML documentation index - HTML: Hypertext Markup Language
133 <input type="range"> element, forms, html, html forms, html input tag, input, range, reference, web,
slider <input> elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value.
...this is typically represented using a
slider or dial control rather than a text entry box like the number input type.
Jetpack Snippets - Archive of obsolete content
800, //wide enough to use firebug onselect: function(slide) { slide.slide(800, true); }}); calling into a slidebar from the global jetpack scope jetpack.slidebar.append({ onready: function (slide) { // call out to a global function, passing the slidebar object exinitslidebar(slide); }, ...});function exinitslidebar(aslidebar) { // this variable will now be global
slider = aslidebar;} // then, accessing the slidebar htmlvar tl =
slider.contentdocument.getelementbyid("thumblist"); // or calling slidebar api methods or accessing properties
slider.notify(); ...
Deprecated and defunct markup - Archive of obsolete content
--neil 03 march 2011 <sidebarheader> not true, still in use --neil 03 march 2011 <
slider> (clickable tray in <scrollbar> which holds <thumb>; do not use alone) also used as part of <scale> --neil 03 march 2011 <spinner> (spinbox; <spinbuttons> with a textbox whereby spinning affects value in textbox; not usable) <spring> (use @flex instead) <strut> (replaced by @debug?) <tabcontrol> (contained tabbox and tabpanel) <text> (like <label> or <description> but does not wr...
scale - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a scale (sometimes referred to as a "
slider") allows the user to select a value from a range.
LiveConnect - Archive of obsolete content
note: liveconnect blocked under some conditions liveconnect calls from javascript to java api are blocked when the java control panel security
slider is set to very high level, or when the
slider is at the default high level and the jre has either expired or is below the security baseline.
Advanced form styling - Learn web development
you can use something like the following to remove the default
slider track completely and replace it with a custom style (a thin red track, in this case): input[type="range"] { appearance: none; -webkit-appearance: none; background: red; height: 2px; padding: 0; outline: 1px solid transparent; } however, it is very difficult to customize the style of the range control's drag handle — to get full control over range styling you'll need to use a whole...
Gecko Roles
role_
slider represents a
slider, which allows the user to adjust a setting in given increments between minimum and maximum values.
Gecko states
tate_modal must do something with control before leaving it ext_state_multi_line edit control that can take multiple lines ext_state_horizontal uses horizontal layout ext_state_opaque indicates this object paints every pixel within its rectangular region ext_state_single_line this text object can only contain 1 line of text ext_state_transient ext_state_vertical especially used for
sliders and scrollbars ext_state_stale object not dead, but not up-to-date either ext_state_enabled a widget that is not unavailable ext_state_sensitive same as enabled for now ext_state_expandable if collapsed or expanded ...
nsIAccessibleStates
ext_state_transient 0x00000400 ext_state_vertical 0x00000800 especially used for
sliders and scrollbars.
AudioBufferSourceNode.loopEnd - Web APIs
buttons are provided to play and stop the audio playback, and
slider controls are used to change the playbackrate, loopstart and loopend properties on the fly.
BaseAudioContext.createDelay() - Web APIs
if you just press the play buttons, the loops will start immediately; if you slide the
sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time.
DelayNode.delayTime - Web APIs
if you just press the play buttons, the loops will start immediately; if you slide the
sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time.
DelayNode - Web APIs
if you just press the play buttons, the loops will start immediately; if you slide the
sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time.
Index - Web APIs
the keyboard allows you to switch among the standard waveforms as well as one custom waveform, and you can control the master gain using a volume
slider beneath the keyboard.
MIDIMessageEvent - Web APIs
a midimessage event is fired every time a midi message is sent from a device represented by a midiinput, for example when a midi keyboard key is pressed, a knob is tweaked, or a
slider is moved.
MediaStreamAudioSourceNode - Web APIs
the range
slider below the <video> element controls the amount of gain given to the lowpass filter — increase the value of the
slider to make the audio sound more bass heavy!
MediaStreamTrackAudioSourceNode - Web APIs
the range
slider below the <video> element controls the amount of gain given to the lowpass filter — increase the value of the
slider to make the audio sound more bass heavy!
Capabilities, constraints, and settings - Web APIs
determining if a constraint is supported if you need to know whether or not a given constriant is supported by the user agent, you can find out by calling navigator.mediadevices.getsupportedconstraints() to get a list of the constrainable properties which the browser knows, like this: let supported = navigator.mediadevices.getsupportedconstraints(); document.getelementbyid("framerate
slider").disabled = !supported["framerate"]; in this example, the supported constraints are fetched, and a control that lets the user configure the frame rate is disabled if the framerate constraint isn't supported.
Resize Observer API - Web APIs
resize-observer-text.html (see source): here we use the resize observer to change the font-size of a header and paragraph as a
slider’s value is changed causing the containing <div> to change width.
Using the Web Audio API - Web APIs
example code our boombox looks like this: note the retro cassette deck with a play button, and vol and pan
sliders to allow you to alter the volume and stereo panning.
Web Audio API - Web APIs
the keyboard allows you to switch among the standard waveforms as well as one custom waveform, and you can control the master gain using a volume
slider beneath the keyboard.
Using the Web Speech API - Web APIs
inputtxt.blur(); } updating the displayed pitch and rate values the last part of the code simply updates the pitch/rate values displayed in the ui, each time the
slider positions are moved.
Using ARIA: Roles, states, and properties - Accessibility
roles widget roles button checkbox gridcell link menuitem menuitemcheckbox menuitemradio option progressbar radio scrollbar searchbox separator (when focusable)
slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles.
WAI-ARIA Roles - Accessibility
ary composite definition directory feed gridcell (eric e) group input landmark link - old page listbox log - old page marquee math menu menubar menuitem menuitemcheckbox menuitemradio none note option presentation progressbar - old page radio - old page radiogroup range region roletype rowheader(estelle) scrollbar searchbox section sectionhead select separator
slider - old page spinbutton status - old page structure tab tablist (michiel) tabpanel (michiel) term timer toolbar tooltip tree treegrid treeitem widget window ...
overview - Accessibility
general resources dhtml style guide provides keyboard interaction recommendations wai-aria authoring practices guide checkbox aria toggle button and tri-state checkbox examples (from "the paciello group blog") aria example checkbox widgets from the university of illinois menu using wai-aria roles and states with the yui menu control
slider from the paciello group blog: aria
slider, part one, part two, part threet (example) creating an accessible, internationalized dojo rating widget tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and aria tab panel example here on codetalks lightbox wcag 2.0 and aria-conformant lightbox appli...
<img>: The Image Embed element - HTML: Hypertext Markup Language
implicit aria role with non-empty alt attribute or no alt attribute: img with empty alt attribute: no corresponding role permitted aria roles with non-empty alt attribute: button checkbox link menuitem menuitemcheckbox menuitemradio option progressbar scrollbar separator
slider switch tab treeitem with empty alt attribute, none or presentation with no alt attribute, no role permitted dom interface htmlimageelement specifications specification status comment referrer policythe definition of 'referrer attribute' in that specification.