<main class="main-wrapper">
<div class="range-slider-container">
<h2 class="heading2">Range Slider</h2>
<input type="range" id="volume" name="volume" min="0" max="100">
<label for="volume" class="control-name">Volume Control / 音量調節</label>
<div class="volume-value">初期値:50</div>
<div class="mt8">左:最小値0 | 右:最大値100</div>
</div>
<div class="divider my32" role="separator"></div>
<div class="range-slider-container mt40">
<h2 class="heading2">Range Slider with Scale</h2>
<input id="something" type="range" name="" list="datalist" min="0" max="100" step="10">
<datalist id="datalist">
<option value="10" label="10"></option>
<option value="20" label="20"></option>
<option value="30" label="30"></option>
<option value="40" label="40"></option>
<option value="50" label="50"></option>
<option value="60" label="60"></option>
<option value="70" label="70"></option>
<option value="80" label="80"></option>
<option value="90" label="90"></option>
<option value="100" label="100"></option>
</datalist>
<label for="" class="control-name">Something Control / 何かの調節</label>
<div class="something-value">初期値:50</div>
</div>
</main>
<main class="main-wrapper">
<div class="range-slider-container">
<h2 class="heading2">Range Slider</h2>
<input type="range" id="volume" name="volume" min="0" max="100">
<label for="volume" class="control-name">Volume Control / 音量調節</label>
<div class="volume-value">初期値:50</div>
<div class="mt8">左:最小値0 | 右:最大値100</div>
</div>
<div class="divider my32" role="separator"></div>
<div class="range-slider-container mt40">
<h2 class="heading2">Range Slider with Scale</h2>
<input id="something" type="range" name="" list="datalist" min="0" max="100" step="10">
<datalist id="datalist">
<option value="10" label="10"></option>
<option value="20" label="20"></option>
<option value="30" label="30"></option>
<option value="40" label="40"></option>
<option value="50" label="50"></option>
<option value="60" label="60"></option>
<option value="70" label="70"></option>
<option value="80" label="80"></option>
<option value="90" label="90"></option>
<option value="100" label="100"></option>
</datalist>
<label for="" class="control-name">Something Control / 何かの調節</label>
<div class="something-value">初期値:50</div>
</div>
</main>
/* No context defined. */
/* /js/modules/RangeSlider.js */
/**
* RangeSlider UI class
*/
export class RangeSlider {
constructor() {
this.range = document.getElementById('volume');
this.volumeValue = document.getElementsByClassName('volume-value')
}
changeRangeNum() {
this.range.addEventListener('input', () => {
this.volumeValue[0].textContent = this.range.value;
});
}
}
/* /js/main.js */
import { RangeSlider } from './modules/RangeSlider.js';
const rangeSlider = new RangeSlider();
rangeSlider.changeRangeNum();
.range-slider-container {
margin: auto;
}
@media print, screen and (min-width:48em) {
.range-slider-container {
width: 50%;
}
}
@media print, screen and (max-width:47.96875em) {
.range-slider-container {
width: 90%;
}
}
.range-slider-container .ui-name {
margin: auto auto 2rem;
}
.range-slider-container .control-name {
display: flex;
justify-content: center;
margin: 1rem auto;
}
input[type="range"] {
width: 100%;
height: 14px;
border: solid 3px #dff1ff;
background: #4bb1ff;
border-radius: 10px;
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
/* WebKit向けのつまみ */
input[type="range"]::-webkit-slider-thumb {
width: 24px;
height: 24px;
background: #065ab4;
border-radius: 50%;
box-shadow: 0 3px 6px 0 hsla(0, 0%, 0%, .15);
-webkit-appearance: none;
}
/* Moz向けのつまみ */
input[type="range"]::-moz-range-thumb {
width: 24px;
height: 24px;
border: none;
background: #53aeff;
border-radius: 50%;
box-shadow: 0 3px 6px 0 hsla(0, 0%, 0%, .15);
}
/* Firefoxで点線が周りに表示されてしまう問題の解消 */
input[type="range"]::-moz-focus-outer {
border: 0;
}
/* つまみをドラッグしているときのスタイル */
input[type="range"]:active::-webkit-slider-thumb {
box-shadow: 0 5px 10px -2px hsla(0, 0%, 0%, .3);
}
.volume-value,
.volume-value-supplement {
text-align: center;
}
.volume-value {
font-size: larger;
font-weight: bold;
}
.volume-value-supplement {
margin-top: .5rem;
}
No notes defined.