krishnamohan-yagneswaran-ui/src/components/KrishnamohanSlider.js

A lightweight custom UI framework built by Krishnamohan Yagneswaran

import { krishna } from '../krishnamohan.js';

export function KrishnamohanSlider({ min = 0, max = 100, step = 1, value = 0, onChange }) {
  return krishna.createElement("div", {
    style: `
      margin: 1rem 0;
    `
  },
    krishna.createElement("input", {
      type: "range",
      min,
      max,
      step,
      value,
      oninput: (e) => onChange?.(parseInt(e.target.value)),
      style: `
        width: 100%;
        accent-color: #0077B6;
        cursor: pointer;
      `
    }),
    krishna.createElement("div", {
      style: `
        text-align: center;
        font-size: 0.9rem;
        margin-top: 0.25rem;
        color: #333;
      `
    }, `Value: ${value}`)
  );
}