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.

Sign up for GitHub

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

updated multithumb slider to use SVG and support mobile devices #1704

Closed
wants to merge 5 commits into from
Closed

updated multithumb slider to use SVG and support mobile devices #1704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e3d0e7
updated multithumb slider to use SVG and support mobile devices
jongund Dec 23, 2020
93804ea
updated keyboard focus styling
jongund Dec 31, 2020
d13c042
fixed linting issues
jongund Dec 31, 2020
9796548
improved mousemove code
jongund Jan 8, 2021
7b61faf
updated high contrast styling support
jongund Jan 26, 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
16 changes: 11 additions & 5 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,9 +284,10 @@ <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-mobile.html">Horizontal Multi-Thumb Slider with Mobile Support</a></li>
<li><a href="slider/slider-multithumb.html">Horizontal Multi-Thumb Slider</a></li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -563,6 +564,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
<li><a href="radio/radio-activedescendant.html">Radio Group Using aria-activedescendant</a></li>
<li><a href="radio/radio.html">Radio Group Using Roving tabindex</a></li>
<li><a href="slider/slider-multithumb-mobile.html">Horizontal Multi-Thumb Slider with Mobile Support</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="table/table.html">Table</a></li>
<li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
Expand Down Expand Up @@ -740,9 +742,10 @@ <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-mobile.html">Horizontal Multi-Thumb Slider with Mobile Support</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 @@ -752,9 +755,10 @@ <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-mobile.html">Horizontal Multi-Thumb Slider with Mobile Support</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 @@ -765,9 +769,10 @@ <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-mobile.html">Horizontal Multi-Thumb Slider with Mobile Support</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 @@ -777,8 +782,9 @@ <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-mobile.html">Horizontal Multi-Thumb Slider with Mobile Support</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
View file
Open in desktop

This file was deleted.

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

.slider-multithumb {
padding: 6px;
width: 350px;
}

.slider-multithumb.focus {
padding: 4px;
border: 2px solid #005a9c;
border-radius: 5px;
}

.slider-multithumb.mobile {
clear: both;
display: grid;
grid-template-columns: 100px 340px 100px;
grid-column-gap: 10px;
width: 550px;
}

.slider-multithumb.mobile .input-minimum,
.slider-multithumb.mobile .input-maximum {
position: relative;
top: 32px;
height: 1.5em;
}

.slider-multithumb.mobile .input-minimum {
grid-column: 1;
}

.slider-multithumb.mobile .input-maximum {
grid-column: 3;
}

.slider-multithumb.mobile .slider-group {
grid-column: 2;
}

.slider-multithumb.mobile .input-minimum input,
.slider-multithumb.mobile .input-maximum input {
width: 4em;
}

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

.slider-multithumb .slider-group .rail {
stroke: currentColor;
stroke-width: 2px;
fill: #ccc;
}

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

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

/* Focus and hover styling */

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

.slider-multithumb.focus .slider-group .rail {
stroke: currentColor;
fill: #adddff;
}

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

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

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

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