34 lines
1.1 KiB
Plaintext
34 lines
1.1 KiB
Plaintext
@using Microsoft.AspNetCore.Components.Web
|
|
|
|
|
|
@attribute [StreamRendering]
|
|
@rendermode InteractiveServer
|
|
|
|
<div class="relative w-full h-24 px-4" @onmouseup="OnMouseUp" @onmousemove="OnMouseMove">
|
|
<!-- Base number line -->
|
|
<div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-300 transform -translate-y-1/2"></div>
|
|
|
|
<!-- Draggable nodes for adjusting range breakpoints -->
|
|
@for (int i = 0; i < TempRanges.Count; i++)
|
|
{
|
|
var left = i == 0 ? 0 : TempRanges[i - 1].Max;
|
|
var leftPercent = (left / 100.0) * 100;
|
|
|
|
<div class="absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600 cursor-pointer"
|
|
style="left: @leftPercent%"
|
|
@onmousedown="(e) => OnMouseDown(i, e)"
|
|
title="@left°F">
|
|
</div>
|
|
}
|
|
|
|
<!-- Color pickers for each range -->
|
|
<div class="flex gap-2 mt-6">
|
|
@for (int i = 0; i < TempRanges.Count; i++)
|
|
{
|
|
var localIndex = i;
|
|
<input type="color"
|
|
value="@TempRanges[i].Color"
|
|
@onchange="e => HandleColorChange(e, localIndex)" />
|
|
}
|
|
</div>
|
|
</div> |