Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
feat(slider): Add color theme mixins; default to secondary; remove `-…
Browse files Browse the repository at this point in the history 
…-off` (#1544)

BREAKING CHANGE: The `mdc-slider--off` modifier class has been removed as it is being removed from the spec.

Resolves #1151
  • Loading branch information
@acdvorak
acdvorak authored Nov 10, 2017
1 parent 8093ad1 commit 28024e9
Show file tree
Hide file tree
Showing 10 changed files with 335 additions and 253 deletions.
172 changes: 112 additions & 60 deletions demos/slider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@

.mdc-theme--dark {
background-color: #333;
--mdc-theme-primary: #64dd17;
}

.custom-bg {
Expand All @@ -48,6 +47,23 @@
--mdc-slider-bg-color-behind-component: #102027;
}

.slider-example {
margin-bottom: 48px;
}

.demo-param-field-group + .demo-param-field-group {
margin-top: 16px;
}

.demo-param-field {
display: block;
}

.demo-param-input-label {
display: inline-block;
min-width: 2.5em;
}

.example-slider-wrapper {
padding: 0 16px;
}
Expand All @@ -69,7 +85,7 @@
<section class="hero">
<div id="hero-slider-wrapper">
<div id="hero-slider" class="mdc-slider" tabindex="0"
role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
role="slider" aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
aria-label="Select Value">
<div class="mdc-slider__track-container">
<div class="mdc-slider__track"></div>
Expand All @@ -84,18 +100,13 @@
</div>
</section>

<section class="example"><em>Note that in browsers that support custom properties, we alter theme's primary
color when using the dark theme toggle so that the slider appears more visible</em></section>

<section id="slider-example" class="example">
<h2>Continuous Slider</h2>
<div class="slider-example">
<p id="example-cs-label">Select Value:</p>

<div class="example-slider-wrapper">
<div id="continuous-mdc-slider" class="mdc-slider" tabindex="0" role="slider"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
aria-labelledby="example-cs-label">
aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
aria-label="Select Value">
<div class="mdc-slider__track-container">
<div class="mdc-slider__track"></div>
</div>
Expand All @@ -109,28 +120,25 @@ <h2>Continuous Slider</h2>
</div>

<p>
Value from <code>MDCSlider:input</code> event: <span id="continuous-slider-value">0</span>
</p>
<p>
Value from <code>MDCSlider:change</code> event: <span id="continuous-slider-committed-value">0</span>
Value from <code>MDCSlider:input</code> event: <span id="continuous-slider-value"></span>
<br>
Value from <code>MDCSlider:change</code> event: <span id="continuous-slider-committed-value"></span>
</p>
</div>


<h2>Discrete Slider</h2>
<div class="slider-example">
<p id="example-ds-label">Select Value:</p>

<div class="example-slider-wrapper">
<div id="discrete-mdc-slider" class="mdc-slider mdc-slider--discrete" tabindex="0" role="slider"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
aria-labelledby="example-ds-label">
aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
aria-label="Select Value">
<div class="mdc-slider__track-container">
<div class="mdc-slider__track"></div>
</div>
<div class="mdc-slider__thumb-container">
<div class="mdc-slider__pin">
<span class="mdc-slider__pin-value-marker">30</span>
<span class="mdc-slider__pin-value-marker">20</span>
</div>
<svg class="mdc-slider__thumb" width="21" height="21">
<circle cx="10.5" cy="10.5" r="7.875"></circle>
Expand All @@ -141,29 +149,26 @@ <h2>Discrete Slider</h2>
</div>

<p>
Value from <code>MDCSlider:input</code> event: <span id="discrete-slider-value">0</span>
</p>
<p>
Value from <code>MDCSlider:change</code> event: <span id="discrete-slider-committed-value">0</span>
Value from <code>MDCSlider:input</code> event: <span id="discrete-slider-value"></span>
<br>
Value from <code>MDCSlider:change</code> event: <span id="discrete-slider-committed-value"></span>
</p>
</div>

<h2>Discrete Slider with markers</h2>
<h2>Discrete Slider with Tick Marks</h2>
<div class="slider-example">
<p id="example-ds-marker-label">Select Value:</p>

<div class="example-slider-wrapper">
<div id="discrete-mdc-slider-w-marker" class="mdc-slider mdc-slider--discrete mdc-slider--display-markers" tabindex="0" role="slider"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
aria-labelledby="example-ds-marker-label">
aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
aria-label="Select Value">
<div class="mdc-slider__track-container">
<div class="mdc-slider__track"></div>
<div class="mdc-slider__track-marker-container">
</div>
</div>
<div class="mdc-slider__thumb-container">
<div class="mdc-slider__pin">
<span class="mdc-slider__pin-value-marker">30</span>
<span class="mdc-slider__pin-value-marker">20</span>
</div>
<svg class="mdc-slider__thumb" width="21" height="21">
<circle cx="10.5" cy="10.5" r="7.875"></circle>
Expand All @@ -174,57 +179,88 @@ <h2>Discrete Slider with markers</h2>
</div>

<p>
Value from <code>MDCSlider:input</code> event: <span id="discrete-slider-w-marker-value">0</span>
Value from <code>MDCSlider:input</code> event: <span id="discrete-slider-w-marker-value"></span>
<br>
Value from <code>MDCSlider:change</code> event: <span id="discrete-slider-w-marker-committed-value"></span>
</p>
</div>

<h2>Custom Colored Discrete Slider with Tick Marks</h2>
<div class="slider-example">
<div class="example-slider-wrapper">
<div id="custom-discrete-mdc-slider-w-marker" class="mdc-slider mdc-slider--discrete mdc-slider--display-markers demo-slider--custom" tabindex="0" role="slider"
aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
aria-label="Select Value">
<div class="mdc-slider__track-container">
<div class="mdc-slider__track"></div>
<div class="mdc-slider__track-marker-container">
</div>
</div>
<div class="mdc-slider__thumb-container">
<div class="mdc-slider__pin">
<span class="mdc-slider__pin-value-marker">20</span>
</div>
<svg class="mdc-slider__thumb" width="21" height="21">
<circle cx="10.5" cy="10.5" r="7.875"></circle>
</svg>
<div class="mdc-slider__focus-ring"></div>
</div>
</div>
</div>

<p>
Value from <code>MDCSlider:change</code> event: <span id="discrete-slider-w-marker-committed-value">0</span>
Value from <code>MDCSlider:input</code> event: <span id="custom-discrete-slider-w-marker-value"></span>
<br>
Value from <code>MDCSlider:change</code> event: <span id="custom-discrete-slider-w-marker-committed-value"></span>
</p>
</div>

<div>
<label>
Min: <input name="min" type="number" min="0" max="100" value="0">
<div class="demo-param-field-group">
<label class="demo-param-field">
<span class="demo-param-input-label">Min:</span>
<input name="min" type="number" min="0" max="100" value="0">
</label>
</div>
<div>
<label>
Max: <input name="max" type="number" min="0" max="100" value="100">
<label class="demo-param-field">
<div class="demo-param-input-label">Max:</div>
<input name="max" type="number" min="0" max="100" value="50">
</label>
</div>
<div>
<label>
Step: <input name="step" type="number" min="0" max="100" value="0">
<label class="demo-param-field">
<span class="demo-param-input-label">Step:</span>
<input name="step" type="number" min="0" max="100" value="0">
</label>
</div>
<div>
<label>
Dark Theme: <input type="checkbox" name="dark-theme">
<div class="demo-param-field-group">
<label class="demo-param-field">
<input type="checkbox" name="disabled">
Disabled
</label>
</div>
<div>
<label>
Disabled: <input type="checkbox" name="disabled">
<label class="demo-param-field">
<input type="checkbox" name="dark-theme">
Dark Theme
</label>
</div>
<div>
<label>
Use Custom BG Color: <input type="checkbox" name="use-custom-color">
<label class="demo-param-field">
<input type="checkbox" name="use-custom-color">
Use Custom BG Color
</label>
</div>
<div>
<label>
RTL: <input type="checkbox" name="rtl">
<label class="demo-param-field">
<input type="checkbox" name="rtl">
RTL
</label>
</div>
</section>
</main>
<script src="/assets/material-components-web.js"></script>
<script>
(function() {
setTimeout(function() {
mdc.slider.MDCSlider.attachTo(document.getElementById('hero-slider'));
initDemo(document.getElementById('slider-example'));
}, 80);
// Wait for Webpack to load CSS. Otherwise, size/position calculations will be incorrect.
var interval = setInterval(function() {
const element = document.getElementById('hero-slider');
if (getComputedStyle(element).position === 'relative') {
clearInterval(interval);
mdc.slider.MDCSlider.attachTo(element);
initDemo(document.getElementById('slider-example'));
}
}, 100);

function initDemo(demoRoot) {
var min = demoRoot.querySelector('[name="min"]');
Expand Down Expand Up @@ -268,22 +304,36 @@ <h2>Discrete Slider with markers</h2>
discreteWMarkerCommittedValue.textContent = discreteWMarkerSlider.value;
});

var customDiscreteWMarkerValue = demoRoot.querySelector('#custom-discrete-slider-w-marker-value');
var customDiscreteWMarkerCommittedValue = demoRoot.querySelector('#custom-discrete-slider-w-marker-committed-value');
var customDiscreteWMarkerSliderEl = demoRoot.querySelector('#custom-discrete-mdc-slider-w-marker');
var customDiscreteWMarkerSlider = new mdc.slider.MDCSlider(customDiscreteWMarkerSliderEl);
customDiscreteWMarkerSlider.listen('MDCSlider:input', function() {
customDiscreteWMarkerValue.textContent = customDiscreteWMarkerSlider.value;
});
customDiscreteWMarkerSlider.listen('MDCSlider:change', function() {
customDiscreteWMarkerCommittedValue.textContent = customDiscreteWMarkerSlider.value;
});

min.addEventListener('input', function() {
continuousSlider.min = parseFloat(min.value);
discreteSlider.min = parseFloat(min.value);
discreteWMarkerSlider.min = parseFloat(min.value);
customDiscreteWMarkerSlider.min = parseFloat(min.value);
});

max.addEventListener('input', function() {
continuousSlider.max = parseFloat(max.value);
discreteSlider.max = parseFloat(max.value);
discreteWMarkerSlider.max = parseFloat(max.value);
customDiscreteWMarkerSlider.max = parseFloat(max.value);
});

step.addEventListener('input', function() {
continuousSlider.step = parseFloat(step.value);
discreteSlider.step = parseFloat(step.value);
discreteWMarkerSlider.step = parseFloat(step.value);
customDiscreteWMarkerSlider.step = parseFloat(step.value);
});

darkTheme.addEventListener('change', function() {
Expand All @@ -296,6 +346,7 @@ <h2>Discrete Slider with markers</h2>
continuousSlider.disabled = disabled.checked;
discreteSlider.disabled = disabled.checked;
discreteWMarkerSlider.disabled = disabled.checked;
customDiscreteWMarkerSlider.disabled = disabled.checked;
});

useCustomColor.addEventListener('change', function() {
Expand All @@ -315,6 +366,7 @@ <h2>Discrete Slider with markers</h2>
continuousSlider.layout();
discreteSlider.layout();
discreteWMarkerSlider.layout();
customDiscreteWMarkerSlider.layout();
});
}
})();
Expand Down
14 changes: 14 additions & 0 deletions demos/slider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,17 @@
@import "./common";
@import "../packages/mdc-slider/mdc-slider";
@import "../packages/mdc-typography/mdc-typography";
@import "../packages/mdc-theme/color-palette";

.demo-slider--custom {
@include mdc-slider-highlight-color($material-color-red-700);
@include mdc-slider-rail-color($material-color-yellow-600, 1);
@include mdc-slider-rail-tick-mark-color(white);
@include mdc-slider-thumb-color($material-color-orange-500);
@include mdc-slider-focus-halo-color($material-color-yellow-900);
@include mdc-slider-value-pin-fill-color-accessible($material-color-pink-500);

@include mdc-theme-dark {
@include mdc-slider-rail-tick-mark-color(black);
}
}
Loading

0 comments on commit 28024e9

Please sign in to comment.