Discrete value range slider should be shorter

[fatih-erikli]

Fixes #1002

[justvanrossum]

The item spacing is too wide and not consistent:

Please make it match the sketch in #1002

[fatih-erikli]

This is a tricky css problem, I will come back to this later.

[fatih-erikli]

If you have a suggestion, I'd be happy to hear.

[justvanrossum]

The element could have its own css that depends on the number of values.

[fatih-erikli]

Can you elaborate? @justvanrossum

[justvanrossum]

Something like:

    el = html.div({style: `width: ${some_computed_value_based_on_num_values}em;`);

or:

    el.style = `width: ${some_computed_value_based_on_num_values}em;`;

[fatih-erikli]

max-width: ${this.values.length * 20}px; width: 100%;

This is how the total width calculated currently.

They look ok, however not pixel perfect.

[fatih-erikli]

Not only the tickmarks, the builtin range slider has that gap too.

Maybe thumb-width should be added to the calculation. I tried, it didn't help.

[justvanrossum]

I don't think you are accounting for the track length bore the first and after the last tickmark. I think the computation should be something like:

this.values.length * 20 + margin * 2

Where margin is the space before the first chckmark.

[fatih-erikli]

Space before the checkmark is half of thumb width. I tried that, it doesn't help.

[fatih-erikli]

Assigning it to @justvanrossum for the remaining gap issue.