查看“用户:2500363/装备等级消耗计算器”的源代码

{{JS|EquipmentCalculator}}
<div class="main-cube" id="main-cube" data-max="70">
	<div>
		<p>类型</p>
		<span class="type-btn" data-type="1" data-pressed="true">武器</span>
		<span class="type-btn" data-type="2">护甲</span>
		<span class="type-btn" data-type="3">挂件</span>
	</div>
	<div>
		<p>稀有度</p>
		<span class="rarity-btn" data-rarity="1">R</span>
		<span class="rarity-btn" data-rarity="2">SR</span>
		<span class="rarity-btn" data-rarity="3">SSR</span>
		<span class="rarity-btn" data-rarity="4" data-pressed="true">UR</span>
	</div>
	<div>等级预设</div>
	<span class="preset-btn" data-value1="1" data-value2="30">01 ~ 30</span>
	<span class="preset-btn" data-value1="1" data-value2="60">01 ~ 60</span>
	<span class="preset-btn" data-value1="1" data-value2="70">01 ~ 70</span>
	<span class="preset-btn" data-value1="30" data-value2="60">30 ~ 60</span>
	<span class="preset-btn" data-value1="30" data-value2="70">30 ~ 70</span>
	<span class="preset-btn" data-value1="60" data-value2="70">60 ~ 70</span>
	<div>等级</div>
	<div class="slider-container">
		<div class="slider-track"></div>
		<span id="slider-1" data-class="range-double" data-id="double-slider-1" data-min="1"
			data-max="70"
			data-value="1"></span>
		<span id="slider-2" data-class="range-double" data-id="double-slider-1" data-min="1"
			data-max="70"
			data-value="70"></span>
	</div>
	<div>
		<p>结算</p> 经验<span id="output-exp">0
		</span><br> 星云物质： <span id="output-prop4">0</span>
			<span id="output-prop3">0
		</span><br> 钱<span id="output-money">0
		</span>
	</div>
</div>
{{#CSS:
/* styles.css */
body {}

.slider-container {
    position: relative;
    width: 600px;
}

input[type="range"].range-double {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 620px;
    pointer-events: none;
    appearance: none;
    background: transparent;
}

input[type="range"].range-double::-webkit-slider-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3498db;
    cursor: pointer;
    appearance: none;
}

input[type="range"].range-double::-moz-range-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3498db;
    cursor: pointer;
}

.slider-track {
    position: absolute;
    height: 5px;
    background: #ddd;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: -1;
}

.slider-range {
    position: absolute;
    height: 5px;
    background: #3498db;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}

.pressed {
    background-color: #3498db;
    color: white;
}
}}