数値コントロールに設定したスライダーの最大値と最小値、ステップ数、目盛りラベルなどをカスタマイズできます。
スライダーのカスタマイズ
スライダーをカスタマイズするには、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 * as React from "react";
import * as ReactDom from "react-dom";
import { GcNumber, GcTextBox } from "@mescius/inputman.react";
import { InputMan } from "@mescius/inputman";
import '@mescius/inputman/CSS/gc.inputman-js.css';
import './styles.css';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const App = () => {
const gcNumber1 = React.createRef();
const gcNumber2 = React.createRef();
const [sliderStep, setSliderStep] = React.useState(10);
const [showMarkLabel, setShowMarkLabel] = React.useState(false);
const [showMarkTip, setShowMarkTip] = React.useState(false);
let markLabelFormat1 = "T:";
let markLabelFormat2 = "%";
let markTipFormat1 = "D:";
let markTipFormat2 = "km";
let tooltipFormat1 = "T:";
let tooltipFormat2 = "℃";
let gcNumber1SliderConfig = {
visible: true,
marks: [0, 100, 40, 66],
step: sliderStep,
markLabelPosition: 'top',
markLabelFormat: (v) => `T:${v}%`,
markTipFormat: (v) => `D:${v}km`,
tooltipFormat: (v) => `T:${v}℃`
};
let gcNumber2SliderConfig = {
position: GC.InputMan.SliderPosition.Right,
visible: true,
marks: [0, 100, 40, 66],
step: sliderStep,
width: 200,
markLabelPosition: 'top',
showMarkTip: true,
markLabelFormat: (v) => `T:${v}%`,
markTipFormat: (v) => `D:${v}km`,
tooltipFormat: (v) => `T:${v}℃`
}
const sliderStepChangeHandler = (e) => {
let step = parseInt(e.target.value);
setSliderStep(step);
gcNumber1.current.getNestedIMControl().slider.step = step;
gcNumber2.current.getNestedIMControl().slider.step = step;
};
const sliderValueChangeModeHandler = (e) => {
gcNumber1.current.getNestedIMControl().slider.valueChangeMode =
sliderValueChangeMode[e.target.selectedIndex];
gcNumber2.current.getNestedIMControl().slider.valueChangeMode =
sliderValueChangeMode[e.target.selectedIndex];
}
const sliderShowMarkLabelHandler = (e) => {
setShowMarkLabel(e.target.checked);
gcNumber1.current.getNestedIMControl().slider.showMarkLabel = e.target.checked;
gcNumber2.current.getNestedIMControl().slider.showMarkLabel = e.target.checked;
}
const sliderMarkLabelPositionHandler = (e) => {
gcNumber2.current.getNestedIMControl().slider.markLabelPosition =
sliderTooltipPosition[e.target.selectedIndex];
}
const updateMarkLabelFormat = () => {
gcNumber1.current.getNestedIMControl().slider.markLabelFormat = (v) =>
`${markLabelFormat1} ${v} ${markLabelFormat2}`;
gcNumber2.current.getNestedIMControl().slider.markLabelFormat = (v) =>
`${markLabelFormat1} ${v} ${markLabelFormat2}`;
}
const markLabelFormat1TextChangedHandler = (e) => {
markLabelFormat1 = e.text;
updateMarkLabelFormat();
}
const markLabelFormat2TextChangedHandler = (e) => {
markLabelFormat2 = e.text;
updateMarkLabelFormat();
}
const sliderShowMarkTipChangedHandler = (e) => {
setShowMarkTip(e.target.checked);
gcNumber1.current.getNestedIMControl().slider.showMarkTip = e.target.checked;
gcNumber2.current.getNestedIMControl().slider.showMarkTip = e.target.checked;
}
const updateMarkTipFormat = () => {
gcNumber1.current.getNestedIMControl().slider.markTipFormat = (v) =>
`${markTipFormat1} ${v} ${markTipFormat2}`;
gcNumber2.current.getNestedIMControl().slider.markTipFormat = (v) =>
`${markTipFormat1} ${v} ${markTipFormat2}`;
}
const markTipFormat1TextChangedHandler = (e) => {
markTipFormat1 = e.text;
updateMarkTipFormat();
}
const markTipFormat2TextChangedHandler = (e) => {
markTipFormat2 = e.text;
updateMarkTipFormat();
}
const sliderTooltipShowModeChangedHandler = (e) => {
gcNumber1.current.getNestedIMControl().slider.tooltipShowMode =
sliderTooltipShowMode[e.target.selectedIndex];
gcNumber2.current.getNestedIMControl().slider.tooltipShowMode =
sliderTooltipShowMode[e.target.selectedIndex];
}
const sliderTooltipPositionChangedHandler = (e) => {
gcNumber1.current.getNestedIMControl().slider.tooltipPosition =
sliderTooltipPosition[e.target.selectedIndex];
gcNumber2.current.getNestedIMControl().slider.tooltipPosition =
sliderTooltipPosition[e.target.selectedIndex];
}
const updateTooltipFormat = () => {
gcNumber1.current.getNestedIMControl().slider.tooltipFormat = (v) =>
`${tooltipFormat1} ${v} ${tooltipFormat2}`;
gcNumber2.current.getNestedIMControl().slider.tooltipFormat = (v) =>
`${tooltipFormat1} ${v} ${tooltipFormat2}`;
}
const tooltipFormat1ChangedHandler = (e) => {
tooltipFormat1 = e.text;
updateTooltipFormat();
}
const tooltipFormat2ChangedHandler = (e) => {
tooltipFormat2 = e.text;
updateTooltipFormat();
}
return (
<div>
<div className={'custom'}>
<GcNumber ref={gcNumber1} minValue={0} maxValue={100} value={50} width={400}
sliderConfig={gcNumber1SliderConfig} />
</div>
<br />
<div className={'custom number2'}>
<GcNumber ref={gcNumber2} minValue={0} maxValue={100} value={50} width={200}
sliderConfig={gcNumber2SliderConfig} />
</div>
<table className={'sample'}>
<tr>
<th>ステップ</th>
<td>
<input type={'number'} value={sliderStep} onChange={(e) => sliderStepChangeHandler(e)} />
</td>
</tr>
<tr>
<th>入力値が変更されるタイミング</th>
<td>
<select onChange={(e) => sliderValueChangeModeHandler(e)}>
<option>スライダーを動かしていた後に入力値が変更される</option>
<option selected>スライダーを動かしている間に入力値が変更される</option>
</select>
</td>
</tr>
<tr>
<th>目盛りラベル</th>
<td>
<label><input type={'checkbox'} checked={showMarkLabel} onChange={(e) => sliderShowMarkLabelHandler(e)} />表示する</label>
</td>
</tr>
<tr>
<th>
目盛りラベルの表示位置<br />※スライダーが数値コントロールの左右に配置する場合のみカスタマイズできます。
</th>
<td>
<select onChange={(e) => sliderMarkLabelPositionHandler(e)}>
<option selected>スライダーの上部</option>
<option>スライダーの下部</option>
</select>
</td>
</tr>
<tr>
<th>目盛りラベルの接頭書式</th>
<td>
<GcTextBox text={markLabelFormat1} onTextChanged={(e) => markLabelFormat1TextChangedHandler(e)}></GcTextBox>
</td>
</tr>
<tr>
<th>目盛りラベルの接尾書式</th>
<td>
<GcTextBox text={markLabelFormat2} onTextChanged={(e) => markLabelFormat2TextChangedHandler(e)}></GcTextBox>
</td>
</tr>
<tr>
<th>目盛りラベルをツールチップで表示</th>
<td>
<label><input type={'checkbox'} checked={showMarkTip} onChange={(e) => sliderShowMarkTipChangedHandler(e)} />表示する</label>
</td>
</tr>
<tr>
<th>目盛りラベルのツールチップの接頭書式</th>
<td>
<GcTextBox text={markTipFormat1} onTextChanged={(e) => markTipFormat1TextChangedHandler(e)}></GcTextBox>
</td>
</tr>
<tr>
<th>目盛りラベルのツールチップの接尾書式</th>
<td>
<GcTextBox text={markTipFormat2} onTextChanged={(e) => markTipFormat2TextChangedHandler(e)}></GcTextBox>
</td>
</tr>
<tr>
<th>ツールチップの表示方法</th>
<td>
<select onChange={(e) => sliderTooltipShowModeChangedHandler(e)}>
<option selected>ホバー時に表示する</option>
<option>常に表示する</option>
<option>表示しない</option>
</select>
</td>
</tr>
<tr>
<th>ツールチップの表示位置</th>
<td>
<select onChange={(e) => sliderTooltipPositionChangedHandler(e)}>
<option selected>スライダーの上部</option>
<option>スライダーの下部</option>
</select>
</td>
</tr>
<tr>
<th>ツールチップの接頭書式</th>
<td>
<GcTextBox text={tooltipFormat1} onTextChanged={(e) => tooltipFormat1ChangedHandler(e)}></GcTextBox>
</td>
</tr>
<tr>
<th>ツールチップの接尾書式</th>
<td>
<GcTextBox text={tooltipFormat2} onTextChanged={(e) => tooltipFormat2ChangedHandler(e)}></GcTextBox>
</td>
</tr>
</table>
</div>
)
};
const sliderValueChangeMode = [
InputMan.SliderValueChangeMode.ThumbRelease,
InputMan.SliderValueChangeMode.ThumbMove,
];
const sliderTooltipPosition = [
InputMan.SliderTooltipPosition.Top,
InputMan.SliderTooltipPosition.Bottom,
];
const sliderTooltipShowMode = [
InputMan.SliderTooltipShowMode.Hover,
InputMan.SliderTooltipShowMode.Always,
InputMan.SliderTooltipShowMode.None,
];
ReactDom.render(<App />, document.getElementById("app"));
<!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 id="app"></div>
</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;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: 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.react": "npm:@mescius/inputman.react/GcInputMan.component.js",
"@mescius/inputman/CSS": "npm:@mescius/inputman/CSS",
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'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: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
