Is is possible to make custom sliders?

[joshua7v]

hi,

currently, with v4, is there a way to build a custom slider which can update the color on wheel properly?
basicly it means can i control the wheel with the api exposed?

maybe write a custom plugin could work, but it feels like not necessary to write a plugin to make it work.

[jaames]

What type of slider are you looking to implement? I was considering adding some kind of custom slider support in v5, but I'm not sure how it will work yet.

[joshua7v]

In my case, the slider could be any type.
So, what i need here, is to control the wheel with js, all the sliders are just other components which can listen and emit events.
The built-in sliders aren't customisable, so it would be great to provide such api.

[jaames]

If you want to just use iro.js' color wheel and implement your own slider controls, you can use the custom layouts feature to remove all components besides the wheel:

const colorPicker = new iro.ColorPicker({
  ...
  layout: [
    {
      component: iro.ui.Wheel,
      options: {}
    },
  ]
});

And then implement sliders however you'd like...

---

My plans for 'customisable' sliders in iro.js would be pretty basic. You'd be able to customise the slider gradient and how it handles input changes, kinda like this:

const colorPicker = new iro.ColorPicker({
  ...
  layout: [
    ...
    {
      component: iro.ui.Slider,
      options: {
        ...
        // getGradient takes the current color and returns an array of [offset, color] to be used for drawing the slider gradient
        getGradient(color) {
          return [
            [0, '#fff'],
            [100, '#000']
          ];
        },
        // onChange is called with the current slider value (as a percentage) when it has changed 
        onChange(value, color) {
          // do something with the new slider value
        }
      }
    },
  ]
});

@joshua7v would that cover your needs?

[joshua7v]

@jaames thanks a lot.

My original question is actually perfectly answered by the upper part of your reply.
The issue is I cannot figure out how 😂
Before asking, I'm not even sure is it possible without making a custom plugin.
I read through the docs, but cannot find any event could move the handle programmaticly.

[jaames]

@joshua7v I'm not really sure that I understand what you're trying to do?

[joshua7v]

@jaames ok, sorry about that
I just realized how silly i am.
Yeah, no issues any more.
What i'm asking here is already provided by directly set colorPicker.color.hexString.
not colorPicker.color = new iro.Color()

[jaames]

Ah, no worries :)

[ile]

Hi,

Did you get around to implement this, @jaames?

I'm looking to create a slider which can be used to create gradient type color combinations, like this:

So, the slider would have multiple handles/indexes, with a certain position and value (color/hue).

[jaames]

@ile That's a little different, but I think gradient support could be cool, and it would play nicely with iro's multicolor support :) Could you maybe open a new request for that?

[ile]

Hi there, did it here: #134