0.0.5 • Published 3 months ago
@ray-js/lamp-style-slider v0.0.5
English | 简体中文
@ray-js/lamp-style-slider
Basic sliding bars of lighting styles
Installation
$ npm install @ray-js/lamp-style-slider
# or
$ yarn add @ray-js/lamp-style-slider
Usage
1. Color temperature slider
import OpacitySlider from '@ray-js/lamp-style-slider';
const [value, setValue] = useState(1000);
const handleMove = v => {
// console.log('move====', v);
};
<OpacitySlider
style={{
paddingLeft: 16,
}}
label="色温"
valueStyle={{ color: 'blue' }}
disable={false}
value={value}
onTouchMove={handleMove}
trackBackgroundColor="linear-gradient(270deg, #CDECFE 1.22%, #FFFFFF 45.36%, #FFFFFF 53.27%, #FFCA5C 98.32%)"
/>
2. Brightness slider
import OpacitySlider from '@ray-js/lamp-style-slider';
const [value, setValue] = useState(1000);
const handleMove = v => {
// console.log('move====', v);
};
<OpacitySlider
style={{
paddingLeft: 16,
}}
label="亮度"
valueStyle={{ color: 'blue' }}
min={1}
disable={false}
value={value}
onTouchMove={handleMove}
trackBackgroundColor="linear-gradient(270deg, #FFFFFF 2.57%, rgba(255, 255, 255, 0) 100.64%)"
thumbColorFormatterConfig={{
formatter: 'hsl(0deg 0% value%)',
scale: 0.1,
}}
/>
3. Hue slider
import OpacitySlider from '@ray-js/lamp-style-slider';
const [value, setValue] = useState(1000);
const handleMove = v => {
// console.log('move====', v);
};
<OpacitySlider
style={{
paddingLeft: 16,
}}
label="hue"
valueStyle={{ color: 'blue' }}
trackStyle={{ height: '100rpx' }}
thumbStyle={{
height: '100rpx',
borderRadius: '20rpx',
width: '40rpx',
boxShadow: 'rgb(0 0 0 / 53%) 0px 1px 7px',
}}
min={0}
max={360}
disable={false}
value={value}
onTouchMove={handleMove}
trackBackgroundColor="linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), linear-gradient(90.01deg, #FF0000 0.01%, #F8CB0E 12.14%, #80FE06 21.83%, #08FB2B 32.75%, #04FAFC 46.38%, #0243FC 58.38%, #8700F9 70.04%, #FC00EF 80.06%, #F00A5B 89.92%, #FF0000 99.99%)"
thumbColorFormatterConfig={{
formatter: 'hsl(valuedeg 100% 50%)',
}}
/>
4. Saturation slider
import OpacitySlider from '@ray-js/lamp-style-slider';
const [value, setValue] = useState(1000);
const handleMove = v => {
// console.log('move====', v);
};
<OpacitySlider
style={{
paddingLeft: 16,
}}
label="saturation"
valueStyle={{ color: 'blue' }}
min={0}
max={100}
disable={false}
value={value}
onTouchMove={handleMove}
trackBackgroundColor={`linear-gradient(90deg, rgba(255, 255, 255, 0), ${hsv2rgbString(
0,
100,
100
)})`}
thumbColorFormatterConfig={{
formatter: 'hsl(0deg 100% value%)',
scale: 0.5,
}}
/>
0.0.5
3 months ago
0.0.4
4 months ago
0.0.3
5 months ago
0.0.3-beta-7
5 months ago
0.0.3-beta-2
5 months ago
0.0.3-beta-5
5 months ago
0.0.3-beta-6
5 months ago
0.0.3-beta-3
5 months ago
0.0.3-beta-4
5 months ago
0.0.3-beta-1
5 months ago
0.0.2
6 months ago
0.0.2-beta-8
7 months ago
0.0.2-beta-7
8 months ago
0.0.2-beta-6
8 months ago
0.0.2-beta-5
8 months ago
0.0.2-beta-4
8 months ago
0.0.2-beta-3
8 months ago
0.0.2-beta-2
8 months ago
0.0.2-beta-1
8 months ago