ドロップダウンスライダーのカスタマイズ | 数値コントロール | InputManJSデモアプリケーション

ドロップダウンスライダーをさまざまなカスタマイズできます。ドロップダウンスライダーのカスタマイズドロップダウンスライダーの表示方向や目盛りラベルの表示、ツールチップの表示などをカスタマイズできます。以下は、ドロップダウンスライダーをカスタマイズできるプロパティです。プロパティ説明デフォルト値 min スライダーで選択できる最小値を指定します。 -100 max スライダーで選択できる最大値を指定します。 100 step スライダーのステップを指定します。 1 marks スライダーの目盛りを指定します。配列 valueChangeMode 入力値が変更されるタイミングを指定します。 ThumbRelease direction スライダーの方向を指定します。水平または垂直を指定できます。水平 showMarkLabel 目盛りラベルを表示するかどうかを指定します。 true markLabelFormat 目盛りラベルの表示書式を設定します。 markLabelPosition 目盛りラベルの表示位置を設定します。 Bottom tooltipShowMode ツールチップの表示方法を指定します。 Hover tooltipFormat ツールチップの表示書式を設定します。 tooltipPosition ツールチップの表示位置を設定します。 Top showMarkTip 目盛りをツールチップで表示するかどうかを指定します。 false markTipFormat ツールチップに表示する目盛りの書式を設定します。 keyStep 矢印キーの「↑」または「↓」を押下する場合のステップを指定します。 false width 方向が水平の場合のスライダーの幅を指定します。 height 方向が垂直の場合のスライダーの高さを指定します。 valueChangeModeプロパティに設定できる値は以下のとおりで、既定値はSliderValueChangeMode.ThumbReleaseです。 SliderValueChangeModeの値説明 ThumbMove スライダーを動かしている間に入力値が変更されます。 ThumbRelease スライダーを動かしていた後に入力値が変更されます。 directionプロパティに設定できる値は以下のとおりで、既定値はSliderDirection.Horizontalです。 SliderDirectionの値説明 Horizontal スライダーの方向を水平に指定します。 Vertical スライダーの方向を垂直に指定します。 tooltipPositionプロパティに設定できる値は以下のとおりで、既定値はSliderTooltipPosition.Topです。 SliderTooltipPositionの値説明 Top ツールチップをスライダーの上部に表示します。 Bottom ツールチップがスライダーの下部に表示します。 tooltipShowModeプロパティに設定できる値は以下のとおりで、既定値はSliderTooltipShowMode.Hoverです。 SliderTooltipShowModeの値説明 None スライダーのツールチップを非表示に設定します。 Always スライダーのツールチップを常に表示します。 Hover ホバー状態のとき、スライダーのツールチップを表示します。

import '@mescius/inputman/CSS/gc.inputman-js.css';
import { InputMan } from '@mescius/inputman';
import './styles.css';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const gcNumber1 = new InputMan.GcNumber(
document.getElementById('gcNumber1'),
{
showDropDownSlider: true,
maxValue: 100,
minValue: 0,
value: 50,
width: 350,
dropDownConfig: {
width: 500,
step: 10,
marks: [0, 22, 50, 78, 100],
keyStep: 2,
tooltipFormat: (v) => `T:${v}℃`,
markLabelFormat: (v) => `H:${v}%`,
markTipFormat: (v) => `D:${v}km`,
tooltipShowMode: InputMan.SliderTooltipShowMode.Always,
},
}
);
// ステップ
document.getElementById('sliderStep').addEventListener('change', (e) => {
gcNumber1.dropDownSlider.step = parseInt(e.target.value);
});
// 入力値が変更されるタイミング
document
.getElementById('sliderValueChangeMode')
.addEventListener('change', (e) => {
gcNumber1.dropDownSlider.valueChangeMode =
sliderValueChangeMode[e.target.selectedIndex];
});
// スライダーの方向
document.getElementById('sliderDirection').addEventListener('change', (e) => {
gcNumber1.dropDownSlider.direction =
sliderDirection[e.target.selectedIndex];
});
// 目盛りラベル
document
.getElementById('sliderShowMarkLabel')
.addEventListener('change', (e) => {
gcNumber1.dropDownSlider.showMarkLabel = e.target.checked;
});
// 目盛りラベルの表示位置
document
.getElementById('sliderMarkLabelPosition')
.addEventListener('change', (e) => {
gcNumber1.dropDownSlider.markLabelPosition =
sliderTooltipPosition[e.target.selectedIndex];
});
// 目盛りラベルの書式
var markLabelFormat1 = new InputMan.GcTextBox(
document.getElementById('markLabelFormat1'),
{
text: 'H:',
}
);
markLabelFormat1.onTextChanged(() => {
gcNumber1.dropDownSlider.markLabelFormat = (v) =>
`${markLabelFormat1.text} ${v} ${markLabelFormat2.text}`;
});
var markLabelFormat2 = new InputMan.GcTextBox(
document.getElementById('markLabelFormat2'),
{
text: '%',
}
);
markLabelFormat2.onTextChanged(() => {
gcNumber1.dropDownSlider.markLabelFormat = (v) =>
`${markLabelFormat1.text} ${v} ${markLabelFormat2.text}`;
});
// ツールチップの表示方法
document
.getElementById('sliderTooltipShowMode')
.addEventListener('change', (e) => {
gcNumber1.dropDownSlider.tooltipShowMode =
sliderTooltipShowMode[e.target.selectedIndex];
});
// ツールチップの表示位置
document
.getElementById('sliderTooltipPosition')
.addEventListener('change', (e) => {
gcNumber1.dropDownSlider.tooltipPosition =
sliderTooltipPosition[e.target.selectedIndex];
});
// ツールチップの書式
var tooltipFormat1 = new InputMan.GcTextBox(
document.getElementById('tooltipFormat1'),
{
text: 'T:',
}
);
tooltipFormat1.onTextChanged(() => {
gcNumber1.dropDownSlider.tooltipFormat = (v) =>
`${tooltipFormat1.text} ${v} ${tooltipFormat2.text}`;
});
var tooltipFormat2 = new InputMan.GcTextBox(
document.getElementById('tooltipFormat2'),
{
text: '℃',
}
);
tooltipFormat2.onTextChanged(() => {
gcNumber1.dropDownSlider.tooltipFormat = (v) =>
`${tooltipFormat1.text} ${v} ${tooltipFormat2.text}`;
});
// 目盛りラベルをツールチップで表示
document
.getElementById('sliderShowMarkTip')
.addEventListener('change', (e) => {
gcNumber1.dropDownSlider.showMarkTip = e.target.checked;
});
// ツールチップに表示する目盛りの書式
var markTipFormat1 = new InputMan.GcTextBox(
document.getElementById('markTipFormat1'),
{
text: 'D:',
}
);
markTipFormat1.onTextChanged(() => {
gcNumber1.dropDownSlider.markTipFormat = (v) =>
`${markTipFormat1.text} ${v} ${markTipFormat2.text}`;
});
var markTipFormat2 = new InputMan.GcTextBox(
document.getElementById('markTipFormat2'),
{
text: 'km',
}
);
markTipFormat2.onTextChanged(() => {
gcNumber1.dropDownSlider.markTipFormat = (v) =>
`${markTipFormat1.text} ${v} ${markTipFormat2.text}`;
});
const sliderDirection = [
InputMan.SliderDirection.Horizontal,
InputMan.SliderDirection.Vertical,
];
const sliderValueChangeMode = [
InputMan.SliderValueChangeMode.ThumbRelease,
InputMan.SliderValueChangeMode.ThumbMove,
];
const sliderTooltipShowMode = [
InputMan.SliderTooltipShowMode.Hover,
InputMan.SliderTooltipShowMode.Always,
InputMan.SliderTooltipShowMode.None,
];
const sliderTooltipPosition = [
InputMan.SliderTooltipPosition.Top,
InputMan.SliderTooltipPosition.Bottom,
];

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数値コントロール - ドロップダウンスライダーカスタマイズ</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function() {
System.import('./src/app');
}
</script>
</head>
<body>
<div class="custom">
<input id="gcNumber1" />
</div>
<table class="sample">
<tr>
<th>ステップ</th>
<td>
<input type="number" value="10" id="sliderStep" />
</td>
</tr>
<tr>
<th>入力値が変更されるタイミング</th>
<td>
<select id="sliderValueChangeMode">
<option selected>スライダーを動かしていた後に入力値が変更される</option>
<option>スライダーを動かしている間に入力値が変更される</option>
</select>
</td>
</tr>
<tr>
<th>スライダーの方向</th>
<td>
<select id="sliderDirection">
<option selected>水平</option>
<option>垂直</option>
</select>
</td>
</tr>
<tr>
<th>ツールチップの表示方法</th>
<td>
<select id="sliderTooltipShowMode">
<option>ホバー時に表示する</option>
<option selected>常に表示する</option>
<option>表示しない</option>
</select>
</td>
</tr>
<tr>
<th>ツールチップの表示位置</th>
<td>
<select id="sliderTooltipPosition">
<option selected>スライダーの上部</option>
<option>スライダーの下部</option>
</select>
</td>
</tr>
<tr>
<th>ツールチップの接頭書式</th>
<td><input type="text" id="tooltipFormat1" /></td>
</tr>
<tr>
<th>ツールチップの接尾書式</th>
<td><input type="text" id="tooltipFormat2" /></td>
</tr>
<tr>
<th>目盛りラベル</th>
<td>
<label><input type="checkbox" id="sliderShowMarkLabel" checked />表示する</label>
</td>
</tr>
<tr>
<th>目盛りラベルの表示位置</th>
<td>
<select id="sliderMarkLabelPosition">
<option>スライダーの上部</option>
<option selected>スライダーの下部</option>
</select>
</td>
</tr>
<tr>
<th>目盛りラベルの接頭書式</th>
<td><input type="text" id="markLabelFormat1" /></td>
</tr>
<tr>
<th>目盛りラベルの接尾書式</th>
<td><input type="text" id="markLabelFormat2" /></td>
</tr>
<tr>
<th>目盛りラベルをツールチップで表示</th>
<td>
<label><input type="checkbox" id="sliderShowMarkTip" />表示する</label>
</td>
</tr>
<tr>
<th>ツールチップに表示する目盛りの接頭書式</th>
<td><input type="text" id="markTipFormat1" /></td>
</tr>
<tr>
<th>ツールチップに表示する目盛りの接尾書式</th>
<td><input type="text" id="markTipFormat2" /></td>
</tr>
</table>
</body>
</html>

body {
padding-bottom: 10rem;
min-height: 250px;
}
.custom {
min-height: 150px;
}

body {
padding-bottom: 10rem;
min-height: 250px;
}
[gcim-control-appearance="modern"] .custom {
min-height: 150px;
}

System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});