New Sliders!

[SyxP]

This reimplements Sliders solving two issues:

1. It starts on the proposed rewrite in HypertextLiteral.jl as stated in https://github.com/fonsp/PlutoUI.jl/pull/62 and https://github.com/fonsp/PlutoUI.jl/issues/59 .
2. This fixes a issue that with multiple of the same Slider with show_value = true, moving a Slider would only change the display of the various input ranges, but not the display of the value. This syncs all the values, solving https://github.com/fonsp/PlutoUI.jl/issues/96 .

Unfortunately, there is a slight caveat to consider. Traditionally, the Slider is seen as the "simplest" example of PlutoUI and a good way to introduce the ecosystem. However, this rewrite makes use of fairly nasty tricks to ensure (2) above.

[fonsp]

Great! Some short comments based on reading the code:

• Can I still place it inline? md"Hello $(@bind x Slider(1:10)) world"? If not try replacing <div> with <span>
• We should use the struct because it defines Base.get, see the Interactivity sample notebook inside Pluto to learn what this means

[SyxP]

I have undid the changes so that it is now Slider <: DataType and re-added the get function. Moreover, you're right, I didn't notice that <div> will consume the whole-line and changed it to <span>. (I only started learning js because of Pluto :smile: )

Let me elaborate a bit more on the overwriting the div valuesetter. Observe the sample notebook on Javascript, if you create two cells saying

1. t = @bind num_clicks ClickCounter()
2. t

when you observe num_clicks, each click counter will carry its own internal state. Thus, simply adding

Object.defineProperty(div, "value",
  {configurable: false, enumerable: false,
  get: () => {return count},
  set: (newVal) => {
    count = newVal
  }})

would cause the individual click counters to update the local variable when the outer div's value property gets set.

[fonsp]

Implemented in #148 , thanks for thinking together!