min/max value options for all slider types

[Mjinx]

It would be nice to change temp range to min and max so it could be applied to other types of sliders such as Alpha.

or is there other ways to limit the alpha range that is reflected on the slider itself (rather than clamping the value on change event)

[jaames]

Hi!

It would be really appreciated if you could provide some potential use-cases for this, I'm struggling to think of any situations where changing the range of the other sliders would be particularly useful or intuitive for users?

In theory it wouldn't be too hard to add, but I prefer not adding extra features unless they're actually going to be helpful, otherwise they're just bloat :)

[Mjinx]

You got me at the bloat and yeah my edge use case might be fairly unique and specific to my use of alpha, not too sure if any one would use the limits for other color channels...

Looking at the API options if there's a Kelvin specific limits a more generic might be available or might be handy.

As for my use case, I have highlighted annotations where ideally I want to prevent users to set alpha value to 0 or 1 as I require some transparency (being an highlight and all)

I tried to use slider input but it didn't look right and wasn't too sure about the custom iro components.

That said, thanks for the great work you done here 👍

[monecchi]

If there was a min, and max slider option for Iro.js, that would help to comply to certain data requirements without the need to hook into Iro.js change events such as 'color:change' , 'input:end' and doing further color value conversions.

I use an API to control a few Tuya compatible smart lamps (bulbs) and Iro.js works great. Not to mention the color helper functions, which are quite handy!

However, in order to fit the API data requirements when making requests, I often see myself doing conversions for setting up min and max values or rouding big integer numbers.

Perhaps this is out of Iro.js scope, but let's consider the following data, which represents a smart lamp available functions when working with the aforementioned API.

"data": {
    "functions": [
      {
          "code": "switch_led",
          "desc": "switch led",
          "name": "switch led",
          "type": "Boolean",
          "values": "{}"
      },
      {
          "code": "work_mode",
          "desc": "work mode",
          "name": "work mode",
          "type": "Enum",
          "values": "{\"range\":[\"white\",\"colour\",\"scene\",\"music\"]}"
      },
      {
          "code": "bright_value_v2",
          "desc": "bright value v2",
          "name": "bright value v2",
          "type": "Integer",
          "values": "{\"min\":10,\"max\":1000,\"scale\":0,\"step\":1}"
      },
      {
          "code": "temp_value_v2",
          "desc": "temp value v2",
          "name": "temp value v2",
          "type": "Integer",
          "values": "{\"min\":0,\"max\":1000,\"scale\":0,\"step\":1}"
      },
      {
          "code": "colour_data_v2",
          "desc": "colour data v2",
          "name": "colour data v2",
          "type": "Json",
          "values": "{\"h\":{\"min\":0,\"scale\":0,\"unit\":\"\",\"max\":360,\"step\":1},\"s\":{\"min\":0,\"scale\":0,\"unit\":\"\",\"max\":1000,\"step\":1},\"v\":{\"min\":0,\"scale\":0,\"unit\":\"\",\"max\":1000,\"step\":1}}"
      }
    ]
}

The data above instruct us that in order to define the device's hsv color, one should set saturation and value ranging between 0 and 1000, but Iro.js color.hsv saturation and value are both min: 0 and max: 100.

In this particular case, Iro.js (color.hsv) s and h values would have to be multiplied by 10, otherwise, the desired result would fail, as the API would consider a s: 50 a really low staturation value, e.g. s: 50 sets the smart lamp color saturation to 5%, but s: 500 sets the smart lamp color saturation to 50%.

reactjs
Before submiting hsv color, a simple conversion has to be made, not a big deal at all. Perhaps a min and max options would not be missed here...

  const handleSubmitColor = async (color) => {
    const dataColor = {
      h: color.h,
      s: color.s * 10,
      v: color.v * 10
    }

    const body = {
      "commands": [
        {
          "code": "work_mode",
          "value": "colour"
        },
        {
          "code": "colour_data_v2",
          "value": JSON.stringify(dataColor)
        }
      ]
    }
    await tuyaApi.post(`api/v1/devices/${deviceId}/commands`, body);
  };

<IroColor
    color={latestColor}
    onChange={(color) => {
      // Update UI colors on change
      setColor(color.hsv);
      setColorHex(color.hexString)
      localStorage.setItem('latestColor', JSON.stringify(color.hsv))
      handleColorChange(color.hsv)
    }}
    onInputEnd={(color) => {
      setColorHex(color.hexString)
      handleSubmitColor(color.hsv)
    }}
  />

The smart lamp (white channel) temperature also requires a value ranging between 0 and 1000, so here Iro.js slider set to kelvin did not help much as it sets min: 2000 and max: 4000, so I had to choose another control (circular slider) to mimic a kelvin temperature picker.