Svelte get the value from color picker

I'm trying to get the color value to my variable fld.color, the below code didnt work, please help how to achieve this
    <List>
    {#each fields as fld, i}
              <ListInput
                type="colorpicker"
                label={fld.label}
                placeholder="Color"
                readonly
                value={fld.color}
                colorPickerParams={{ modules: ['palette'], openIn: 'auto', openInPhone: 'sheet', palette: palette, formatValue(value) {
                    return value.hex;
                  } }}
                 colorPickerChange={e=>fld.color=e.target.value }>
              </ListInput>
    {/each}

</List>

should be:

colorPickerChange={ value => fld.color= value.hex }
1 Like

its not working
I tried to console.log on colorPickerChange, the event is not getting fired when we pick color

<List>
      <ListInput
        type="colorpicker"
        label="Pick color"
        placeholder="Pick color"
        readonly
         value={{ hex: '#00ffff' }}
        colorPickerParams={{ modules: ['palette'], openIn: 'auto', openInPhone: 'sheet', palette: palette, formatValue(value) {
            return value.hex;
          } }}
        colorPickerChange={ value => console.log('sdsd')}>
      </ListInput>
    </List>

I’m using this in production and it works pretty good:

let themeColorInt = {rgb:[parseInt(tmp[0]),parseInt(tmp[1]),parseInt(tmp[2])]}
...
...
...
<ListInput
	onChange={e=>themeColor = e.target.value}
	type="colorpicker"
	label="Primary color"
	placeholder="Primary color"
	readonly
	value={themeColorInt}
	colorPickerParams={{
		modules: ['initial-current-colors', 'rgb-sliders'],
		sliderValue: true,
		sliderLabel: true,
		formatValue(value) {
		return `rgb(${value.rgb.join(', ')})`;
		},
	}}
/>

I’m using rgb but it should work the same for hex values, if not, just throw a debugger; in your js script or @debug in your html/svelte markup and you should be able to find out where any complaints come from regarding the color format.

If you’re still unsure, the documentation says:

If type="colorpicker" then value must be passed as what Color Picker accepts - Object with colors, for example value={{hex: '#ff0000'}}

and color picker accepts these: https://framework7.io/docs/color-picker.html#color-picker-value

Nonetheless, even if you don’t get that part to work, all it means is that the color picker won’t be able to initialize a specific color you chose, but it should still work once you try change the value using the ui.

Hope this helps.

1 Like