so://phie

blob: 8ef139f73458a1675c123ccf989a2d504dab1ddb (2339 bytes)[doc][blame][raw]

 1<div id="app"></div>
 2
 3<script type="module">
 4
 5  import {useState, createElement} from 'https://cdn.skypack.dev/react';
 6  import {render} from 'https://cdn.skypack.dev/react-dom';
 7  import {createTlx, css} from '../tlx.js';
 8
 9  const tlx = createTlx(createElement);
10
11  const Range = ({index, value, setValue}) => {
12    const style = css`
13      .range input[type=range] {
14        width: 100%;
15        -webkit-appearance: none;
16      }
17
18      .range.v-${index}-${value} input[type=range]::-webkit-slider-runnable-track {
19        background-color: rgb(${Array.from([0, 0, 0], (item, i) => i === index ? value : item).join(', ')});
20        width: 100%;
21        height: 12px;
22      }
23  
24      .range input[type=range]::-webkit-slider-thumb {
25        background-color: #CCC;
26        width: 12px;
27        height: 12px;
28        -webkit-appearance: none;
29        cursor: pointer;
30      }
31    `;
32
33    return tlx`
34      <div class="range v-${index}-${value}">
35        ${style}
36        <input
37          type="range"
38          @change="${(event) => setValue(Number(event.target.value))}"
39          min="0"
40          max="255"
41          value="${value}"
42        >
43      </div>
44    `;
45  }
46
47  const Picker = () => {
48    const [red, setRed] = useState(255);
49    const [green, setGreen] = useState(65);
50    const [blue, setBlue] = useState(155);
51
52    const style = css`
53      .picker {
54        display: inline-flex;
55        flex-direction: column;
56        gap: 10px;
57        padding: 50px;
58      }
59  
60      .picker .preview {
61        width: 200px;
62        height: 200px;
63        background-color: rgb(${red}, ${green}, ${blue});
64      }
65  
66      .picker p {
67        margin: 0px;
68        text-align: center;
69        font-family: monospace;
70        font-size: 16px;
71      }
72    `;
73
74    const hex = (dec) => dec.toString(16).toUpperCase().padStart(2, '0');
75
76    return tlx`
77      <div class="picker">
78        ${style}
79        <div class="preview"></div>
80        <p>rgb(${red}, ${green}, ${blue})</p>
81        <p>#${hex(red)}${hex(green)}${hex(blue)}</p>
82        ${Range({ index: 0, value: red, setValue: setRed })}
83        ${Range({ index: 1, value: green, setValue: setGreen })}
84        ${Range({ index: 2, value: blue, setValue: setBlue })}
85      </div>
86    `;
87  }
88
89  const app = document.querySelector('#app');
90  render(createElement(Picker), app);
91
92</script>