ドロップダウンスライダーをさまざまなカスタマイズできます。
ドロップダウンスライダーのカスタマイズ
ドロップダウンスライダーの表示方向や目盛りラベルの表示、ツールチップの表示などをカスタマイズできます。
以下は、ドロップダウンスライダーをカスタマイズできるプロパティです。
プロパティ
説明
デフォルト値
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 * 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 [sliderStep, setSliderStep] = React.useState(10);
const [showMarkLabel, setShowMarkLabel] = React.useState(true);
const [showMarkTip, setShowMarkTip] = React.useState(false);
let gcNumber1DropDownConfig = {
width: 500,
step: sliderStep,
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,
};
let markLabelFormat1 = "H:";
let markLabelFormat2 = "%";
let tooltipFormat1 = "T:";
let tooltipFormat2 = "℃";
let markTipFormat1 = "D:";
let markTipFormat2 = "km";
const sliderStepHandler = (e) => {
let step = parseInt(e.target.value)
setSliderStep(step);
gcNumber1.current.getNestedIMControl().dropDownSlider.step = step;
}
const sliderValueChangeModeHandler = (e) => {
gcNumber1.current.getNestedIMControl().dropDownSlider.valueChangeMode =
sliderValueChangeMode[e.target.selectedIndex];
}
const sliderDirectionHandler = (e) => {
gcNumber1.current.getNestedIMControl().dropDownSlider.direction =
sliderDirection[e.target.selectedIndex];
}
const sliderShowMarkLabelHandler = (e) => {
setShowMarkLabel(e.target.checked);
gcNumber1.current.getNestedIMControl().dropDownSlider.showMarkLabel = e.target.checked;
}
const sliderMarkLabelPositionHandler = (e) => {
gcNumber1.current.getNestedIMControl().dropDownSlider.markLabelPosition =
sliderTooltipPosition[e.target.selectedIndex];
}
const updateMarkLabelFormat = () => {
gcNumber1.current.getNestedIMControl().dropDownSlider.markLabelFormat = (v) =>
`${markLabelFormat1} ${v} ${markLabelFormat2}`;
}
const markLabelFormat1Handler = (s) => {
markLabelFormat1 = s.text;
updateMarkLabelFormat();
}
const markLabelFormat2Handler = (s) => {
markLabelFormat2 = s.text;
updateMarkLabelFormat();
}
const sliderTooltipShowModeHandler = (e) => {
gcNumber1.current.getNestedIMControl().dropDownSlider.tooltipShowMode =
sliderTooltipShowMode[e.target.selectedIndex];
}
const sliderTooltipPositionHandler = (e) => {
gcNumber1.current.getNestedIMControl().dropDownSlider.tooltipPosition =
sliderTooltipPosition[e.target.selectedIndex];
}
const updateTooltipFormat = () => {
gcNumber1.current.getNestedIMControl().dropDownSlider.tooltipFormat = (v) =>
`${tooltipFormat1} ${v} ${tooltipFormat2}`;
}
const tooltipFormat1Handler = (s) => {
tooltipFormat1 = s.text;
updateTooltipFormat();
}
const tooltipFormat2Handler = (s) => {
tooltipFormat2 = s.text;
updateTooltipFormat();
}
const sliderShowMarkTipHandler = (e) => {
setShowMarkTip(e.target.checked);
gcNumber1.current.getNestedIMControl().dropDownSlider.showMarkTip = e.target.checked;
}
const updateMarkTipFormat = () => {
gcNumber1.current.getNestedIMControl().dropDownSlider.markTipFormat = (v) =>
`${markTipFormat1} ${v} ${markTipFormat2}`;
}
const markTipFormat1Handler = (s) => {
markTipFormat1 = s.text;
updateMarkTipFormat();
}
const markTipFormat2Handler = (s) => {
markTipFormat2 = s.text;
updateMarkTipFormat();
}
return (
<div>
<div className={'custom'}>
<GcNumber ref={gcNumber1}
showDropDownSlider={true}
maxValue={100}
minValue={0}
value={50}
width={350}
dropDownConfig={gcNumber1DropDownConfig}
></GcNumber>
</div>
<table className={'sample'}>
<tr>
<th>ステップ</th>
<td>
<input type={'number'} value={sliderStep} onChange={sliderStepHandler} />
</td>
</tr>
<tr>
<th>入力値が変更されるタイミング</th>
<td>
<select onChange={sliderValueChangeModeHandler}>
<option selected>スライダーを動かしていた後に入力値が変更される</option>
<option>スライダーを動かしている間に入力値が変更される</option>
</select>
</td>
</tr>
<tr>
<th>スライダーの方向</th>
<td>
<select onChange={sliderDirectionHandler}>
<option selected>水平</option>
<option>垂直</option>
</select>
</td>
</tr >
<tr>
<th>ツールチップの表示方法</th>
<td>
<select onChange={sliderTooltipShowModeHandler}>
<option>ホバー時に表示する</option>
<option selected>常に表示する</option>
<option>表示しない</option>
</select>
</td>
</tr >
<tr>
<th>ツールチップの表示位置</th>
<td>
<select onChange={sliderTooltipPositionHandler}>
<option selected>スライダーの上部</option>
<option>スライダーの下部</option>
</select>
</td>
</tr >
<tr>
<th>ツールチップの接頭書式</th>
<td>
<GcTextBox text={tooltipFormat1} onTextChanged={tooltipFormat1Handler}></GcTextBox>
</td>
</tr >
<tr>
<th>ツールチップの接尾書式</th>
<td>
<GcTextBox text={tooltipFormat2} onTextChanged={tooltipFormat2Handler}></GcTextBox>
</td>
</tr >
<tr>
<th>目盛りラベル</th>
<td>
<label><input type={'checkbox'} checked={showMarkLabel} onChange={sliderShowMarkLabelHandler} />表示する</label>
</td>
</tr>
<tr>
<th>目盛りラベルの表示位置</th>
<td>
<select onChange={sliderMarkLabelPositionHandler}>
<option>スライダーの上部</option>
<option selected>スライダーの下部</option>
</select>
</td>
</tr >
<tr>
<th>目盛りラベルの接頭書式</th>
<td>
<GcTextBox text={markLabelFormat1} onTextChanged={markLabelFormat1Handler}></GcTextBox>
</td>
</tr >
<tr>
<th>目盛りラベルの接尾書式</th>
<td>
<GcTextBox text={markLabelFormat2} onTextChanged={markLabelFormat2Handler}></GcTextBox>
</td>
</tr >
<tr>
<th>目盛りラベルをツールチップで表示</th>
<td>
<label><input type={'checkbox'} checked={showMarkTip} onChange={sliderShowMarkTipHandler} />表示する</label>
</td>
</tr>
<tr>
<th>ツールチップに表示する目盛りの接頭書式</th>
<td>
<GcTextBox text={markTipFormat1} onTextChanged={markTipFormat1Handler}></GcTextBox>
</td>
</tr >
<tr>
<th>ツールチップに表示する目盛りの接尾書式</th>
<td>
<GcTextBox text={markTipFormat2} onTextChanged={markTipFormat2Handler}></GcTextBox>
</td>
</tr >
</table >
</div >
);
};
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,
];
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;
min-height: 250px;
}
.custom {
min-height: 150px;
}
body {
padding-bottom: 10rem;
min-height: 250px;
}
[gcim-control-appearance="modern"] .custom {
min-height: 150px;
}
(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',
'@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js',
'@mescius/inputman.comment.react': 'npm:@mescius/inputman.comment.react/GcInputMan.component.js',
'@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/CSS',
'@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js',
'@mescius/inputman.richtexteditor.react': 'npm:@mescius/inputman.richtexteditor.react/GcInputMan.component.js',
'@mescius/inputman.richtexteditor/CSS': 'npm:@mescius/inputman.richtexteditor/CSS',
'@mescius/inputman.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/autosave': 'npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/charmap': 'npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/directionality': 'npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/emoticons': 'npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/fullscreen': 'npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/htmlcode': 'npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/image': 'npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/link': 'npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/lists': 'npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/media': 'npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/pagebreak': 'npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/preview': 'npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/save': 'npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/searchreplace': 'npm:@mescius/inputman.richtexteditor/JS/plugins/searchreplace/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/table': 'npm:@mescius/inputman.richtexteditor/JS/plugins/table/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/template': 'npm:@mescius/inputman.richtexteditor/JS/plugins/template/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/wordcount': 'npm:@mescius/inputman.richtexteditor/JS/plugins/wordcount/plugin.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js',
'@mescius/wijmo.react.grid': 'npm:@mescius/wijmo.react.grid/index.js',
'@mescius/wijmo.react.base': 'npm:@mescius/wijmo.react.base/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets/styles': 'npm:@mescius/spread-sheets/styles',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'react-dom/client': '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);
