Skip to content

Commit 8c9ec64

Browse files
PragatiVerma18PragatiVerma18
committed
Removed Slider Value
1 parent 120e6ab commit 8c9ec64

File tree

1 file changed

+104
-62
lines changed

1 file changed

+104
-62
lines changed

‎ui-react-starter/src/components/ColorPicker.jsx‎

Lines changed: 104 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -5,68 +5,110 @@ import { WC } from "../components/WC.jsx";
55
import "./ColorPicker.css";
66

77
export class ColorPicker extends React.Component {
8-
#sldR;
9-
#sldG;
10-
#sldB;
11-
#txtR;
12-
#txtG;
13-
#txtB;
14-
constructor(props) {
15-
super(props);
16-
this.state = {
17-
r: 0xF0,
18-
g: 0xC0,
19-
b: 0xA0
20-
};
8+
#sldR;
9+
#sldG;
10+
#sldB;
11+
#txtR;
12+
#txtG;
13+
#txtB;
14+
constructor(props) {
15+
super(props);
16+
this.state = {
17+
r: 0xf0,
18+
g: 0xc0,
19+
b: 0xa0,
20+
};
2121

22-
this.#sldR = React.createRef();
23-
this.#sldG = React.createRef();
24-
this.#sldB = React.createRef();
25-
this.#txtR = React.createRef();
26-
this.#txtG = React.createRef();
27-
this.#txtB = React.createRef();
28-
}
29-
updateColor = evt => {
30-
const target = evt.target;
31-
const part = target.getAttribute("data-part");
22+
this.#sldR = React.createRef();
23+
this.#sldG = React.createRef();
24+
this.#sldB = React.createRef();
25+
this.#txtR = React.createRef();
26+
this.#txtG = React.createRef();
27+
this.#txtB = React.createRef();
28+
}
29+
updateColor = (evt) => {
30+
const target = evt.target;
31+
const part = target.getAttribute("data-part");
3232

33-
this.setState({[part]: Number(target.value)});
34-
}
35-
render() {
36-
const {r, g, b} = this.state;
37-
return (
38-
<div className="colorPicker">
39-
<div className="color" style={{backgroundColor: `rgb(${r}, ${g}, ${b})`}}></div>
40-
<WC onInput={this.updateColor}>
41-
<div className="sliderWithInput">
42-
<div className="filledRange">
43-
<div className="gradient red" style={{background:`linear-gradient(to right, rgb(0, ${g}, ${b}), rgb(255, ${g}, ${b}))`}}></div>
44-
<sp-slider ref={this.#sldR} data-part="r" value={r} min={0} max={255}>
45-
<sp-label slot="label">Red</sp-label>
46-
</sp-slider>
47-
</div>
48-
<sp-textfield ref={this.#txtR} data-part="r" type="number" value={r} min={0} max={255}></sp-textfield>
49-
</div>
50-
<div className="sliderWithInput">
51-
<div className="filledRange">
52-
<div className="gradient green" style={{background:`linear-gradient(to right, rgb(${r}, 0, ${b}), rgb(${r}, 255, ${b}))`}}></div>
53-
<sp-slider ref={this.#sldG} data-part="g" value={g} min={0} max={255}>
54-
<sp-label slot="label">Green</sp-label>
55-
</sp-slider>
56-
</div>
57-
<sp-textfield ref={this.#txtG} data-part="g" type="number" value={g} min={0} max={255}></sp-textfield>
58-
</div>
59-
<div className="sliderWithInput">
60-
<div className="filledRange">
61-
<div className="gradient blue" style={{background:`linear-gradient(to right, rgb(${r}, ${g}, 0), rgb(${r}, ${g}, 255))`}}></div>
62-
<sp-slider ref={this.#sldB} data-part="b" value={b} min={0} max={255}>
63-
<sp-label slot="label">Blue</sp-label>
64-
</sp-slider>
65-
</div>
66-
<sp-textfield ref={this.#txtB} data-part="b" type="number" value={b} min={0} max={255}></sp-textfield>
67-
</div>
68-
</WC>
33+
this.setState({ [part]: Number(target.value) });
34+
};
35+
render() {
36+
const { r, g, b } = this.state;
37+
return (
38+
<div className="colorPicker">
39+
<div
40+
className="color"
41+
style={{ backgroundColor: `rgb(${r}, ${g}, ${b})` }}
42+
></div>
43+
<WC onInput={this.updateColor}>
44+
<div className="sliderWithInput">
45+
<div className="filledRange">
46+
<sp-slider
47+
show-value="false"
48+
ref={this.#sldR}
49+
data-part="r"
50+
value={r}
51+
min={0}
52+
max={255}
53+
>
54+
<sp-label slot="label">Red</sp-label>
55+
</sp-slider>
6956
</div>
70-
);
71-
}
72-
}
57+
<sp-textfield
58+
ref={this.#txtR}
59+
data-part="r"
60+
type="number"
61+
value={r}
62+
min={0}
63+
max={255}
64+
></sp-textfield>
65+
</div>
66+
<div className="sliderWithInput">
67+
<div className="filledRange">
68+
<sp-slider
69+
show-value="false"
70+
ref={this.#sldG}
71+
data-part="g"
72+
value={g}
73+
min={0}
74+
max={255}
75+
>
76+
<sp-label slot="label">Green</sp-label>
77+
</sp-slider>
78+
</div>
79+
<sp-textfield
80+
ref={this.#txtG}
81+
data-part="g"
82+
type="number"
83+
value={g}
84+
min={0}
85+
max={255}
86+
></sp-textfield>
87+
</div>
88+
<div className="sliderWithInput">
89+
<div className="filledRange">
90+
<sp-slider
91+
show-value="false"
92+
ref={this.#sldB}
93+
data-part="b"
94+
value={b}
95+
min={0}
96+
max={255}
97+
>
98+
<sp-label slot="label">Blue</sp-label>
99+
</sp-slider>
100+
</div>
101+
<sp-textfield
102+
ref={this.#txtB}
103+
data-part="b"
104+
type="number"
105+
value={b}
106+
min={0}
107+
max={255}
108+
></sp-textfield>
109+
</div>
110+
</WC>
111+
</div>
112+
);
113+
}
114+
}

0 commit comments

Comments
 (0)