MDUI
首页
注册

MDUI滑块不能把最小值指定为负数

wrj
???
2020-09-04 21:36:32

我创建的一个网站里偷偷地加了一个MDUI测试页面,代码如下:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>MDUI测试页面</title>
	<link rel="icon" type="image/x-icon"
		href="https://asset.mozhua.org:444/Media?name=7EC286EE2D937C1978D880BAA93161AA.png">
	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css" />
	<script src="//cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"></script>
	<style type="text/css">
		body {
			background-color: #9999DD;
		}
	</style>
</head>

<body class="mdui-appbar-with-toolbar">
	<div class="mdui-appbar mdui-appbar-fixed">
		<div class="mdui-toolbar mdui-color-indigo-500">
			<a href="/"
				class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"><i class="mdui-icon material-icons">chevron_left</i></a>
			<span class="mdui-typo-title">MDUI测试页面</span>
			<div class="mdui-toolbar-spacer"></div>
			<a href="/mdui-test-page"
				class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"><i class="mdui-icon material-icons">refresh</i></a>
			<a href="/mdui-test-page/more"
				class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"><i class="mdui-icon material-icons">more_vert</i></a>
		</div>
	</div>
	<div>
		<ul class="mdui-list">
			<li class="mdui-list-item mdui-ripple">test1</li>
			<li class="mdui-list-item mdui-ripple">test2</li>
			<li class="mdui-list-item mdui-ripple">test3</li>
			<li class="mdui-list-item mdui-ripple">test4</li>
			<li class="mdui-list-item mdui-ripple">test5</li>
			<li class="mdui-list-item mdui-ripple">test6</li>
			<li class="mdui-list-item mdui-ripple">test7</li>
			<li class="mdui-list-item mdui-ripple">test8</li>
			<li class="mdui-list-item mdui-ripple">test9</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
			<li class="mdui-list-item mdui-ripple">test</li>
		</ul>
	</div>
	<center>
		<div>
			<button class="mdui-btn mdui-ripple mdui-color-indigo-500 mdui-btn-raised">
					按钮
			</button>
		</div>
	</center>
	<div>
		<div class="mdui-panel mdui-panel-gapless" mdui-panel>
			<div class="mdui-panel-item">
				<div class="mdui-panel-item-header mdui-ripple">test1</div>
				<div class="mdui-panel-item-body">
					<p>
						test1
					</p>
					<p>
						test1
					</p>
					<p>
						test1
					</p>
				</div>
			</div>
			<div class="mdui-panel-item">
				<div class="mdui-panel-item-header mdui-ripple">test2</div>
				<div class="mdui-panel-item-body">
					<p>
						test2
					</p>
					<p>
						test2
					</p>
					<p>
						test2
					</p>
				</div>
			</div>
		</div>
	</div>
	<div class="mdui-container">
		<div class="mdui-textfield mdui-textfield-floating-label mdui-ripple">
			<label class="mdui-textfield-label">用户名</label>
			<input class="mdui-textfield-input" type="text"/>
			</div>
			<div class="mdui-textfield mdui-textfield-floating-label mdui-ripple">
				<label class="mdui-textfield-label">密码</label>
				<input class="mdui-textfield-input" type="password"/>
			</div>
			</div>
			<div>
				<div class="mdui-container">
					<table class="mdui-table mdui-table-hoverable">
						<thead>
							<tr>
								<th>#</th>
								<th>1</th>
								<th>2</th>
								<th>3</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>2</td>
								<td>4</td>
								<td>5</td>
								<td>6</td>
							</tr>
							<tr>
								<td>3</td>
								<td>7</td>
								<td>8</td>
								<td>9</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<center>
				<br>
				<br>
				<div>
					<div class="mdui-progress">
						<div class="mdui-progress-indeterminate"></div>
					</div>
					<br>
					<div class="mdui-spinner"></div>
				</div>
				<div class="mdui-container" style="background-color:#EEEEEE">
					<label class="mdui-slider mdui-slider-discrete">
					<input type="range" step="0.1" min="-100" max="100"/>
				</label>
				</div>
				<div>
					<select class="mdui-select" mdui-select="{position: 'bottom'}">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
				</select>
				</div>
				<div>
					<button class="mdui-btn mdui-ripple mdui-color-white">
						button
					</button>
				</div>
			</center>
</body>

</html>

MDUI是正常导入的,但是会发现浏览器底下有左右滑动条。往下翻,找到MDUI的滑块,样式和示例一模一样,然而拖动的时候会看到滑杆的左半部分(负数的一部分)都不能拖动,而且拖动后鼠标会变成禁用图标。鼠标可拖动的范围向右移动了很长一段距离,实际上页面下面的左右滑动条就是因为这段距离而自动显示的。

萌新的我想问问是代码的问题,还是MDUI自己的问题??