Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider: Updated multithumb slider based on slider focus group meeting #1758

Merged
merged 37 commits into from
Aug 24, 2021
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
85d6564
updated multithumb slider example from slider focus group meeting
jongund Feb 9, 2021
f655378
updated to use pointer events and remove support for input elements
jongund Feb 9, 2021
34afe51
fixed spelling mistake
jongund Feb 9, 2021
b46e105
added touch-action to CSS
jongund Feb 9, 2021
e96f7d9
added touch advisement
jongund Feb 9, 2021
a5b350e
updated value limit code
jongund Feb 16, 2021
6358677
added meta tag
jongund Feb 18, 2021
5e329ad
removed outer focus ring and updated documentation
jongund Feb 24, 2021
eae4966
added documentation about using inline SVG
jongund Feb 25, 2021
d0fc3a8
updated documentation and fill color of slider rail
jongund Mar 2, 2021
e41aafd
updated slider move event for mouse to stay inside of thumb
jongund Mar 2, 2021
a765ba0
fixed spelling error
jongund Mar 2, 2021
a1f39b1
fixed initial positioning of max slider value
jongund Mar 2, 2021
3fd5d8a
added range rect between min and max thumbs to visual indicate the ra…
jongund Mar 3, 2021
5e2d119
updated warning documentation
jongund Mar 3, 2021
dbd98a2
updated example to remove flight price and use of aria-valuetext
jongund Mar 10, 2021
24d177a
fixed example reference for multithumb slider
jongund Mar 10, 2021
b32d8fa
fixed example reference for multithumb slider
jongund Mar 10, 2021
17a7042
updated code and accessibility information for support high contrast …
jongund Apr 6, 2021
66a6983
fixed css linting issue
jongund Apr 6, 2021
facec63
updated documentation and added role=none and aria-hidden
jongund Apr 22, 2021
c3f6165
fixed some linting errors
jongund Apr 22, 2021
4a62955
updated color styling of rail and thumbs with focus
jongund Apr 27, 2021
4b612c6
updated color styling of rail and thumbs with focus to match other sl…
jongund Apr 27, 2021
3861e97
updated label for sliders and accessibility documentation
jongund May 4, 2021
e255ab3
updated accessibility documentation on using fill-opacity
jongund May 12, 2021
64f60c7
Merge in main and fix conflicts
mcking65 May 25, 2021
0435eff
Update warning language to match other slider examples
mcking65 May 25, 2021
be2affe
Simplify intro
mcking65 May 25, 2021
80128b2
Update list of similar examples
mcking65 May 25, 2021
9c0bfd0
Update wording of accessibility features documentation to match lates…
mcking65 May 25, 2021
1fe991f
Revise aria-hidden documentation
mcking65 May 25, 2021
b866c6f
Make aria-hidden documentation in rating slider match wording in seek…
mcking65 May 25, 2021
d401396
fixed css linting error
jongund May 25, 2021
422bcb8
fixed css linting error
jongund May 25, 2021
298fade
Merge remote-tracking branch 'origin/main' into slider-multithumb-update
mcking65 Aug 24, 2021
60a48bb
Add link to media seek slider
mcking65 Aug 24, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -298,9 +298,9 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<td><code>slider</code></td>
<td>
<ul>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-1.html">Horizontal Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-multithumb.html">Horizontal Multi-Thumb Slider</a></li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -755,9 +755,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td>
<ul>
<li><a href="meter/meter.html">Meter</a></li>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-1.html">Horizontal Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-multithumb.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
</ul>
</td>
Expand All @@ -767,9 +767,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td>
<ul>
<li><a href="meter/meter.html">Meter</a></li>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-1.html">Horizontal Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-multithumb.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="toolbar/toolbar.html">Toolbar</a></li>
</ul>
Expand All @@ -780,9 +780,9 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td>
<ul>
<li><a href="meter/meter.html">Meter</a></li>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-1.html">Horizontal Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-multithumb.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="toolbar/toolbar.html">Toolbar</a></li>
</ul>
Expand All @@ -792,8 +792,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td><code>aria-valuetext</code></td>
<td>
<ul>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-multithumb.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="toolbar/toolbar.html">Toolbar</a></li>
</ul>
Expand Down
48 changes: 0 additions & 48 deletions examples/slider/css/multithumb-slider.css

This file was deleted.

76 changes: 76 additions & 0 deletions examples/slider/css/slider-multithumb.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/* CSS Document */

.slider-multithumb {
padding: 6px;
width: 350px;
touch-action: pan-y;
}

.slider-multithumb .slider-group {
color: #005a9c;
}

.slider-multithumb .slider-group .value {
font-size: 80%;
color: currentColor;
fill: currentColor;
}

.slider-multithumb .slider-group .rail {
stroke: currentColor;
stroke-width: 2px;
fill: transparent;
opacity: 0.6;
}

.slider-multithumb .slider-group .range {
fill: currentColor;
opacity: 0.5;
}

.slider-multithumb .slider-group .thumb {
stroke: transparent;
stroke-width: 2px;
fill: currentColor;
}

.slider-multithumb .slider-group .focus-ring {
stroke-width: 3px;
stroke: transparent;
fill: transparent;
stroke-linecap: round;
stroke-linejoin: round;
}

/* Focus and hover styling */

.slider-multithumb .slider-group g.rail,
.slider-multithumb .slider-group g.focus {
color: black;
}

.slider-multithumb .slider-group.active g.rail {
opacity: 0.8;
}

.slider-multithumb .slider-group.active g.range {
fill: currentColor;
}

.slider-multithumb [role="slider"]:focus {
outline: none;
}

.slider-multithumb [role="slider"]:hover .focus-ring,
.slider-multithumb [role="slider"]:focus .focus-ring {
stroke: currentColor;
}

.slider-multithumb [role="slider"]:focus .thumb {
stroke: currentColor;
}

.slider-multithumb [role="slider"]:focus .value {
color: currentColor;
font-weight: bold;
}
Loading