OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
 
master @ 33 LINES
 
[ HISTORY ]  [ UP ]
 

---
// Native range input overlaid on an ASCII track; the script re-renders
// the track text on input.
import { buildSliderTrack, type Props } from "./Slider";
import "./Slider.scss";

const { name, value = 50, min = 0, max = 100, step = 1, cells = 20, showValue = tr
ue } = Astro.props as Props;
---
<span class="slider" style={`--slider-cells: ${cells}`}><span class="slider-track"
 aria-hidden="true" data-cells={cells}>{buildSliderTrack(value, min, max, cells)}<
/span><input
  type="range"
  name={name}
  value={value}
  min={min}
  max={max}
  step={step}
  aria-label={name}
/>{showValue && <span class="slider-value">{" " + String(value).padStart(3)}</span
>}</span>

<script>
  import { buildSliderTrack } from "./Slider";

  document.addEventListener("input", (e) => {
    const input = (e.target as HTMLElement).closest?.<HTMLInputElement>(".slider i
nput[type=range]");
    if (!input) return;
    const slider = input.closest(".slider")!;
    const track = slider.querySelector<HTMLElement>(".slider-track")!;
    const cells = Number(track.dataset.cells) || 20;
    track.textContent = buildSliderTrack(Number(input.value), Number(input.min), N
umber(input.max), cells);
    const readout = slider.querySelector(".slider-value");
    if (readout) readout.textContent = " " + String(input.value).padStart(3);
  });
</script>


---
// Native range input overlaid on an ASCII t
rack; the script re-renders
// the track text on input.
import { buildSliderTrack, type Props } from
 "./Slider";
import "./Slider.scss";

const { name, value = 50, min = 0, max = 100
, step = 1, cells = 20, showValue = true } =
 Astro.props as Props;
---
<span class="slider" style={`--slider-cells:
 ${cells}`}><span class="slider-track" aria-
hidden="true" data-cells={cells}>{buildSlide
rTrack(value, min, max, cells)}</span><input
  type="range"
  name={name}
  value={value}
  min={min}
  max={max}
  step={step}
  aria-label={name}
/>{showValue && <span class="slider-value">{
" " + String(value).padStart(3)}</span>}</sp
an>

<script>
  import { buildSliderTrack } from "./Slider
";

  document.addEventListener("input", (e) => 
{
    const input = (e.target as HTMLElement).
closest?.<HTMLInputElement>(".slider input[t
ype=range]");
    if (!input) return;
    const slider = input.closest(".slider")!
;
    const track = slider.querySelector<HTMLE
lement>(".slider-track")!;
    const cells = Number(track.dataset.cells
) || 20;
    track.textContent = buildSliderTrack(Num
ber(input.value), Number(input.min), Number(
input.max), cells);
    const readout = slider.querySelector(".s
lider-value");
    if (readout) readout.textContent = " " +
 String(input.value).padStart(3);
  });
</script>

 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET