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

Jump to bottom

feat(slider): Implement discrete slider and discrete slider with marker #842

Merged
merged 2 commits into from
Jun 29, 2017
Merged

feat(slider): Implement discrete slider and discrete slider with marker #842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0dc6d8
feat(slider): Implement discrete slider and discrete slider with marker
yeelan0319 Jun 15, 2017
20a21a2
Merge branch 'master' into feat/discrete-slier
yeelan0319 Jun 29, 2017
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
229 changes: 165 additions & 64 deletions demos/slider.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,13 @@
<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 class="example">
<section id="slider-example" class="example">
<h2>Continuous Slider</h2>
<div id="continuous-slider-example" class="slider-example">
<div class="slider-example">
<p id="example-cs-label">Select Value:</p>

<div class="example-slider-wrapper">
<div class="mdc-slider" tabindex="0" role="slider"
<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">
<div class="mdc-slider__track-container">
Expand All @@ -109,56 +109,122 @@ <h2>Continuous Slider</h2>
</div>
</div>

<div>
<label>
Min: <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>
</div>
<div>
<label>
Step: <input name="step" type="number" min="0" max="100" value="0">
</label>
</div>
<div>
<label>
Dark Theme: <input type="checkbox" name="dark-theme">
</label>
</div>
<div>
<label>
Disabled: <input type="checkbox" name="disabled">
</label>
</div>
<div>
<label>
Use Custom BG Color: <input type="checkbox" name="use-custom-color">
</label>
<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>
</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">
<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>
</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>
<div>
<label>
RTL: <input type="checkbox" name="rtl">
</label>

<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>
</p>
</div>

<h2>Discrete Slider with markers</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">
<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>
</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:input</code> event: <span class="value">0</span>
Value from <code>MDCSlider:input</code> event: <span id="discrete-slider-w-marker-value">0</span>
</p>
<p>
Value from <code>MDCSlider:change</code> event: <span class="committed-value">0</span>
Value from <code>MDCSlider:change</code> event: <span id="discrete-slider-w-marker-committed-value">0</span>
</p>
</div>

<div>
<label>
Min: <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>
</div>
<div>
<label>
Step: <input name="step" type="number" min="0" max="100" value="0">
</label>
</div>
<div>
<label>
Dark Theme: <input type="checkbox" name="dark-theme">
</label>
</div>
<div>
<label>
Disabled: <input type="checkbox" name="disabled">
</label>
</div>
<div>
<label>
Use Custom BG Color: <input type="checkbox" name="use-custom-color">
</label>
</div>
<div>
<label>
RTL: <input type="checkbox" name="rtl">
</label>
</div>
</section>
</main>
<script src="assets/material-components-web.js" charset="utf-8"></script>
<script>
(function() {
setTimeout(function() {
mdc.slider.MDCSlider.attachTo(document.getElementById('hero-slider'));
initDemo(document.getElementById('continuous-slider-example'));
initDemo(document.getElementById('slider-example'));
}, 80);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unnecessary to use 80 here, we just need it to be called at the end of the execution queue.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to keep this one as the style loader we use sometime will not be fully loaded when the page runs to the end of this script. It will unstably have some funny weird effect if they are not initialize correctly. We have similar setup in toolbar and dialog.


function initDemo(demoRoot) {
Expand All @@ -169,55 +235,90 @@ <h2>Continuous Slider</h2>
var disabled = demoRoot.querySelector('[name="disabled"]');
var useCustomColor = demoRoot.querySelector('[name="use-custom-color"]');
var rtl = demoRoot.querySelector('[name="rtl"]');
var value = demoRoot.querySelector('.value');
var committedValue = demoRoot.querySelector('.committed-value');
var sliderEl = demoRoot.querySelector('.mdc-slider');
var slider = new mdc.slider.MDCSlider(sliderEl);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why get rid of continuous in the classname in the DOM and add continuous to the variable name here?

Either way works, but we should be consistent

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently the demo is set up to have 3 type of slider configured by the same control panel, since the control panel is really long (has max, min, rtl, etc...)
In this case, I do want to select a demoRoot that differentiate contents from hero part, but also since there are multiple sliders within that wrapper, I removed the continuous in the class and name the variables to identify which one is which.

Does that answer your question?


slider.listen('MDCSlider:input', function() {
value.textContent = slider.value;
var continuousValue = demoRoot.querySelector('#continuous-slider-value');
var continuousCommittedValue = demoRoot.querySelector('#continuous-slider-committed-value');
var continuousSliderEl = demoRoot.querySelector('#continuous-mdc-slider');
var continuousSlider = new mdc.slider.MDCSlider(continuousSliderEl);
continuousSlider.listen('MDCSlider:input', function() {
continuousValue.textContent = continuousSlider.value;
});
continuousSlider.listen('MDCSlider:change', function() {
continuousCommittedValue.textContent = continuousSlider.value;
});

slider.listen('MDCSlider:change', function() {
committedValue.textContent = slider.value;
var discreteValue = demoRoot.querySelector('#discrete-slider-value');
var discreteCommittedValue = demoRoot.querySelector('#discrete-slider-committed-value');
var discreteSliderEl = demoRoot.querySelector('#discrete-mdc-slider');
var discreteSlider = new mdc.slider.MDCSlider(discreteSliderEl);
discreteSlider.listen('MDCSlider:input', function() {
discreteValue.textContent = discreteSlider.value;
});
discreteSlider.listen('MDCSlider:change', function() {
discreteCommittedValue.textContent = discreteSlider.value;
});

var discreteWMarkerValue = demoRoot.querySelector('#discrete-slider-w-marker-value');
var discreteWMarkerCommittedValue = demoRoot.querySelector('#discrete-slider-w-marker-committed-value');
var discreteWMarkerSliderEl = demoRoot.querySelector('#discrete-mdc-slider-w-marker');
var discreteWMarkerSlider = new mdc.slider.MDCSlider(discreteWMarkerSliderEl);
discreteWMarkerSlider.listen('MDCSlider:input', function() {
discreteWMarkerValue.textContent = discreteWMarkerSlider.value;
});
discreteWMarkerSlider.listen('MDCSlider:change', function() {
discreteWMarkerCommittedValue.textContent = discreteWMarkerSlider.value;
});

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

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

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

darkTheme.addEventListener('change', function() {
demoRoot
.querySelector('.example-slider-wrapper')
.classList[ darkTheme.checked ? 'add' : 'remove']('mdc-theme--dark');
var examples = demoRoot.querySelectorAll('.example-slider-wrapper');
examples.forEach((example) => {
example.classList[ darkTheme.checked ? 'add' : 'remove']('mdc-theme--dark');
});
});

disabled.addEventListener('change', function() {
slider.disabled = disabled.checked;
continuousSlider.disabled = disabled.checked;
discreteSlider.disabled = disabled.checked;
discreteWMarkerSlider.disabled = disabled.checked;
});

useCustomColor.addEventListener('change', function() {
demoRoot
.querySelector('.example-slider-wrapper')
.classList[ useCustomColor.checked ? 'add' : 'remove' ]('custom-bg');
var examples = demoRoot.querySelectorAll('.example-slider-wrapper');
examples.forEach((example) => {
example.classList[ useCustomColor.checked ? 'add' : 'remove' ]('custom-bg');
});
});

rtl.addEventListener('change', function() {
var wrapper = demoRoot.querySelector('.example-slider-wrapper');
if (rtl.checked) {
wrapper.setAttribute('dir', 'rtl');
} else {
wrapper.removeAttribute('dir');
}
slider.layout();
var examples = demoRoot.querySelectorAll('.example-slider-wrapper');
examples.forEach((example) => {
if (rtl.checked) {
example.setAttribute('dir', 'rtl');
} else {
example.removeAttribute('dir');
}
});
continuousSlider.layout();
discreteSlider.layout();
discreteWMarkerSlider.layout();
});
}
})();
Expand Down
Loading