Add range details panel

source/Component/AttrInput/AttrInput.scss

@@ -0,0 +1,78 @@
+@import "../Theme/Theme.scss";
+
+div.attr-input {
+	width: 100%;
+	display: flex;
+	min-height: 24px;
+	padding: 8px 0;
+
+	div.input-intro {
+		width: 50%;
+		height: 100%;
+		max-width: 180px;
+		display: flex;
+		align-items: center;
+	}
+
+	div.input-content {
+		width: 50%;
+		height: 100%;
+		max-width: 180px;
+		box-sizing: border-box;
+		border-radius: 3px;
+		overflow: hidden;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		min-height: 24px;
+
+		input {
+			padding: 0 5px;
+			width: 100%;
+			height: 100%;
+			border: none;
+			outline:none;
+		};
+
+		input:focus {
+			border: none;
+		}
+
+		div.button-left, div.button-right {
+			height: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			vertical-align: middle;
+			cursor: pointer;
+			user-select: none;
+			padding: 0 3px;
+		}
+	}
+}
+
+div.dark.attr-input {
+
+	div.input-content,
+	div.input-content input {
+		background-color: $lt-bg-color-lvl3-dark;
+		color: $lt-font-color-normal-dark;
+	}
+
+	div.button-left:hover, div.button-right:hover {
+		background-color: $lt-bg-color-lvl2-dark;
+	}
+}
+
+div.light.attr-input {
+
+	div.input-content,
+	div.input-content input {
+		background-color: $lt-bg-color-lvl3-light;
+		color: $lt-font-color-normal-light;
+	}
+
+	div.button-left:hover, div.button-right:hover {
+		background-color: $lt-bg-color-lvl2-light;
+	}
+}

source/Component/AttrInput/AttrInput.tsx

@@ -0,0 +1,37 @@
+import { Component, ReactNode } from "react";
+import { FontLevel, Theme } from "@Component/Theme/Theme";
+import "./AttrInput.scss";
+import { Icon } from "@fluentui/react";
+
+interface IAttrInputProps {
+	isNumber?: boolean;
+}
+
+class AttrInput extends Component<IAttrInputProps> {
+	public render(): ReactNode {
+
+		return <Theme
+			className="attr-input"
+			fontLevel={FontLevel.normal}
+		>
+			<div className="input-intro">
+				Input
+			</div>
+			<div className="input-content">
+				{
+					this.props.isNumber ? <div className="button-left">
+						<Icon iconName="ChevronLeft"></Icon>
+					</div> : null
+				}
+				<input className="input"></input>
+				{
+					this.props.isNumber ? <div className="button-right">
+						<Icon iconName="ChevronRight"></Icon>
+					</div> : null
+				}
+			</div>
+		</Theme>
+	}
+}
+
+export { AttrInput };