カスタマイズ | 数値コントロール | InputManJSデモアプリケーション | Developer Tools〈開発支援ツール〉

数値コントロールに設定したスライダーの最大値と最小値、ステップ数、目盛りラベルなどをカスタマイズできます。スライダーのカスタマイズスライダーをカスタマイズするには、sliderConfigプロパティのオプションを設定します。例えば、stepプロパティを設定することでスライダーを操作するときの増分値を指定できます。marksプロパティを設定すると、スライダーの目盛りとして表示されます。スライダーを設定するプロパティは以下のとおりです。プロパティ説明デフォルト値 position スライダーの表示位置を指定します。 BottomBorder visible スライダーを表示するかどうかを指定します。 false step スライダーのステップを指定します。 1 marks スライダーの目盛りを指定します。配列 valueChangeMode 入力値が変更されるタイミングを指定します。 ThumbMove showMarkLabel 目盛りラベルを表示するかどうかを指定します。 false markLabelPosition 目盛りラベルの表示位置を設定します。 Bottom markLabelFormat 目盛りラベルの表示書式を設定します。 showMarkTip 目盛りをツールチップで表示するかどうかを指定します。 true markTipFormat ツールチップに表示する目盛りの書式を設定します。 tooltipPosition ツールチップに表示する目盛りの書式を設定します。 Top tooltipShowMode ツールチップの表示方法を指定します。 Hover tooltipFormat ツールチップの表示書式を設定します。 valueChangeModeプロパティに設定できる値は以下のとおりで、既定値はSliderValueChangeMode.ThumbMoveです。 SliderValueChangeModeの値説明 ThumbMove スライダーを動かしている間に入力値が変更されます。 ThumbRelease スライダーを動かしていた後に入力値が変更されます。 markLabelPositionプロパティに設定できる値は以下のとおりで、既定値はSliderTooltipPosition.Bottomです。 SliderTooltipPositionの値説明 Top ツールチップをスライダーの上部に表示します。 Bottom ツールチップがスライダーの下部に表示します。 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'),
{
minValue: 0,
maxValue: 100,
value: 50,
width: 400,
sliderConfig: {
visible: true,
marks: [0, 100, 40, 66],
step: 10,
markLabelPosition: 'top',
markLabelFormat: (v) => `T:${v}%`,
markTipFormat: (v) => `D:${v}km`,
tooltipFormat: (v) => `T:${v}℃`
},
}
);
const gcNumber2 = new InputMan.GcNumber(
document.getElementById('gcNumber2'),
{
minValue: 0,
maxValue: 100,
value: 50,
width: 200,
sliderConfig: {
position: InputMan.SliderPosition.Right,
visible: true,
marks: [0, 100, 40, 66],
step: 10,
width: 200,
markLabelPosition: 'top',
showMarkTip: true,
markLabelFormat: (v) => `T:${v}%`,
markTipFormat: (v) => `D:${v}km`,
tooltipFormat: (v) => `T:${v}℃`
},
}
);
// ステップ
document.getElementById('sliderStep').addEventListener('change', (e) => {
gcNumber1.slider.step = parseInt(e.target.value);
gcNumber2.slider.step = parseInt(e.target.value);
});
// 入力値が変更されるタイミング
document
.getElementById('sliderValueChangeMode')
.addEventListener('change', (e) => {
gcNumber1.slider.valueChangeMode =
sliderValueChangeMode[e.target.selectedIndex];
gcNumber2.slider.valueChangeMode =
sliderValueChangeMode[e.target.selectedIndex];
});
// 目盛りラベル
document
.getElementById('sliderShowMarkLabel')
.addEventListener('change', (e) => {
gcNumber1.slider.showMarkLabel = e.target.checked;
gcNumber2.slider.showMarkLabel = e.target.checked;
});
// 目盛りラベルの表示位置
document
.getElementById('sliderMarkLabelPosition')
.addEventListener('change', (e) => {
gcNumber2.slider.markLabelPosition =
sliderTooltipPosition[e.target.selectedIndex];
});
// 目盛りラベルの書式
var markLabelFormat1 = new InputMan.GcTextBox(
document.getElementById('markLabelFormat1'),
{
text: 'T:',
}
);
markLabelFormat1.onTextChanged(() => {
gcNumber1.slider.markLabelFormat = (v) =>
`${markLabelFormat1.text} ${v} ${markLabelFormat2.text}`;
gcNumber2.slider.markLabelFormat = (v) =>
`${markLabelFormat1.text} ${v} ${markLabelFormat2.text}`;
});
var markLabelFormat2 = new InputMan.GcTextBox(
document.getElementById('markLabelFormat2'),
{
text: '%',
}
);
markLabelFormat2.onTextChanged(() => {
gcNumber1.slider.markLabelFormat = (v) =>
`${markLabelFormat1.text} ${v} ${markLabelFormat2.text}`;
gcNumber2.slider.markLabelFormat = (v) =>
`${markLabelFormat1.text} ${v} ${markLabelFormat2.text}`;
});
// 目盛りラベルをツールチップで表示
document
.getElementById('sliderShowMarkTip')
.addEventListener('change', (e) => {
gcNumber1.slider.showMarkTip = e.target.checked;
gcNumber2.slider.showMarkTip = e.target.checked;
});
// 目盛りラベルツールチップの書式
var markTipFormat1 = new InputMan.GcTextBox(
document.getElementById('markTipFormat1'),
{
text: 'D:',
}
);
markTipFormat1.onTextChanged(() => {
gcNumber1.slider.markTipFormat = (v) =>
`${markTipFormat1.text} ${v} ${markTipFormat2.text}`;
gcNumber2.slider.markTipFormat = (v) =>
`${markTipFormat1.text} ${v} ${markTipFormat2.text}`;
});
var markTipFormat2 = new InputMan.GcTextBox(
document.getElementById('markTipFormat2'),
{
text: 'km',
}
);
markTipFormat2.onTextChanged(() => {
gcNumber1.slider.markTipFormat = (v) =>
`${markTipFormat1.text} ${v} ${markTipFormat2.text}`;
gcNumber2.slider.markTipFormat = (v) =>
`${markTipFormat1.text} ${v} ${markTipFormat2.text}`;
});
// ツールチップの表示方法
document
.getElementById('sliderTooltipShowMode')
.addEventListener('change', (e) => {
gcNumber1.slider.tooltipShowMode =
sliderTooltipShowMode[e.target.selectedIndex];
gcNumber2.slider.tooltipShowMode =
sliderTooltipShowMode[e.target.selectedIndex];
});
// ツールチップの表示位置
document
.getElementById('sliderTooltipPosition')
.addEventListener('change', (e) => {
gcNumber1.slider.tooltipPosition =
sliderTooltipPosition[e.target.selectedIndex];
gcNumber2.slider.tooltipPosition =
sliderTooltipPosition[e.target.selectedIndex];
});
// ツールチップの書式
var tooltipFormat1 = new GC.InputMan.GcTextBox(
document.getElementById('tooltipFormat1'),
{
text: 'T:',
}
);
tooltipFormat1.onTextChanged(() => {
gcNumber1.slider.tooltipFormat = (v) =>
`${tooltipFormat1.text} ${v} ${tooltipFormat2.text}`;
gcNumber2.slider.tooltipFormat = (v) =>
`${tooltipFormat1.text} ${v} ${tooltipFormat2.text}`;
});
var tooltipFormat2 = new GC.InputMan.GcTextBox(
document.getElementById('tooltipFormat2'),
{
text: '℃',
}
);
tooltipFormat2.onTextChanged(() => {
gcNumber1.slider.tooltipFormat = (v) =>
`${tooltipFormat1.text} ${v} ${tooltipFormat2.text}`;
gcNumber2.slider.tooltipFormat = (v) =>
`${tooltipFormat1.text} ${v} ${tooltipFormat2.text}`;
});
const sliderValueChangeMode = [
InputMan.SliderValueChangeMode.ThumbRelease,
InputMan.SliderValueChangeMode.ThumbMove,
];
const sliderTooltipPosition = [
InputMan.SliderTooltipPosition.Top,
InputMan.SliderTooltipPosition.Bottom,
];
const sliderTooltipShowMode = [
GC.InputMan.SliderTooltipShowMode.Hover,
GC.InputMan.SliderTooltipShowMode.Always,
GC.InputMan.SliderTooltipShowMode.None,
];

<!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>
<input id="gcNumber1" class="custom" />
</div>
<br>
<div class="number2">
<input id="gcNumber2" class="custom" />
</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>スライダーを動かしていた後に入力値が変更される</option>
<option selected>スライダーを動かしている間に入力値が変更される</option>
</select>
</td>
</tr>
<tr>
<th>目盛りラベル</th>
<td>
<label><input type="checkbox" id="sliderShowMarkLabel" />表示する</label>
</td>
</tr>
<tr>
<th>
目盛りラベルの表示位置<br />※スライダーが数値コントロールの左右に配置する場合のみカスタマイズできます。
</th>
<td>
<select id="sliderMarkLabelPosition">
<option selected>スライダーの上部</option>
<option>スライダーの下部</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>
<tr>
<th>ツールチップの表示方法</th>
<td>
<select id="sliderTooltipShowMode">
<option selected>ホバー時に表示する</option>
<option>常に表示する</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>
</table>
</body>
</html>

body {
padding-bottom: 10rem;
}
.number2 {
margin-top: 30px;
}
.custom .gcim__number-slider-container {
height: 8px;
border-radius: 100px;
background-color: #d5eee2;
}
.custom .gcim__number-slider-container .slider-bar {
background-color: #21a666;
}
.custom .gcim__number-slider-container .slider-bar .slider {
width: 15px;
height: 20px;
border-radius: 14.5px;
background-color: #eedb0e;
}
.custom .gcim__number-slider-container .quick-number-container .quick-number {
width: 6px;
background-color: #7b669f;
}
.custom .gcim__number-slider-container[enable="false"] {
background-color: #e2f3eb;
}
.custom .gcim__number-slider-container[enable="false"] .slider-bar {
background-color: #63c194;
}
.custom .gcim__number-slider-container[enable="false"] .slider-bar .slider {
background-color: #f3e656;
}
.custom .gcim__number-slider-container[enable="false"] .quick-number-container .quick-number {
background-color: #a294bc;
}

body {
padding-bottom: 10rem;
}
[gcim-control-appearance="modern"] .number2 {
margin-top: 30px;
}
[gcim-control-appearance="modern"] .custom .gcim__number-slider-container {
height: 8px;
border-radius: 100px;
background-color: #d5eee2;
}
[gcim-control-appearance="modern"] .custom .gcim__number-slider-container .slider-bar {
background-color: #21a666;
}
[gcim-control-appearance="modern"] .custom .gcim__number-slider-container .slider-bar .slider {
width: 15px;
height: 20px;
border-radius: 14.5px;
background-color: #eedb0e;
}
[gcim-control-appearance="modern"] .custom .gcim__number-slider-container .quick-number-container .quick-number {
width: 6px;
background-color: #7b669f;
}
[gcim-control-appearance="modern"] .custom .gcim__number-slider-container[enable="false"] {
background-color: #e2f3eb;
}
[gcim-control-appearance="modern"] .custom .gcim__number-slider-container[enable="false"] .slider-bar {
background-color: #63c194;
}
[gcim-control-appearance="modern"] .custom .gcim__number-slider-container[enable="false"] .slider-bar .slider {
background-color: #f3e656;
}
[gcim-control-appearance="modern"] .custom .gcim__number-slider-container[enable="false"] .quick-number-container .quick-number {
background-color: #a294bc;
}

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'
},
}
});