From this starter, what will you create?

[Westbrook]

While as many of our component documentation pages as possible feature a "Try it on webcomponents.dev" shield linking to a minimal demo project featuring the component it question, sometimes starting from an existing component demo isn't what you're looking to do. With this in mind the starter templates that webcomponents.dev features for each technology with which you can build a web component standardizes on a counter example to help you compare techniques. Did you know that Spectrum Web Components has one of these, too?

Check it out! https://webcomponents.dev/edit/HnzByTTgk9ahQ0S29zWi/src/index.stories.js

Along with the standard counter application built with Spectrum Web Components, this starter comes with the swcThemeDecorator baked into the stories for the project so that you can easily switch between the various Spectrum theme combinations from the jump and start deciding which combination is right for you application as soon as possible. This code also outlines how to you Spectrum icons as registered elements in your user interfaces while ensuring interactive elements are still appropriately labeled for accessibility, too.

Take a test drive of the Spectrum Web Components Starter today and share what you make below!

[Westbrook]

This is kind of cheating, as it's built from the Slider Starter, and not the general starter... but, a query for a multi-range slider came up on the Lit & Friends Slack Channel and I wanted to see what might be possible with the amazing work @cuberoot did early this year with our multi-handled slider implementation. I came up with a rough prototype of how you could make something of this sort: https://webcomponents.dev/edit/CrM9PdA9bZTRe6I7n3SU/src/index.ts and I think it's actually kind of nice (even if I'm not sure I completely understand the need for such a UI).

What do you think? Can you think of/share ways to take this even further?

Spending some time with this makes me wish for a solid reason to prioritize #586 as it would be pretty cool to have the fill/offset be controllable between the various handles in a way that allowed it to be more clear how they are related therein. Anyone interested in making a contribution? Taking into account the advanced min/max capabilities via the next/previous values for those handles, there is some cool advanced UI delivery to take into account there. Very exciting to see the range of the slider 😆

From there, a little more nuance around the color customization, etc. and some deeper thought into the aria content delivery and there could be a nice future in this element.

[mahdiridho]

Hi @Westbrook

Thanks for starting this topic, really appreciate!

As per question on the Lit & Friends Slack Channel , this is the sample link of what actually we have achieved. Your previous sample was so helpful 😎😎

[Westbrook]

This very cool! I really like the interactivity between the two sliders here.

Do you find that control over the handle color is enough to deliver the intention of this interface?

If you can think of features or API simplification/clarification that would further support this approach, please let us know.

Thanks for sharing 🙏🏼

[mahdiridho]

That's enough to meet our requirements at the moment. I am not sure whether there would be possible to have another case in the future as our project continues to grow based on use case. Perhaps I will get the topic with the team tomorrow.

[flatmax]

@mahdiridho 's example is nice eh !
Say we have three handles and we are moving the middle handle. It would be nice if - when we hit a handle on either side - the middle handle would be able to push it along, rather then freezing.

[Westbrook]

Cool idea @flatmax!

You could expand on what @mahdiridho has started here along these lines to achieve that if it were the right experience for the feature you were surfacing: https://webcomponents.dev/edit/Dsenmkh4jsaupSEa4yfY/

[mahdiridho]

cool! I love the way how you improve the slider event. It looks better and clean!

Just had updates into my code and works nicely, thanks

[bossanovaorca]

Is there a codepen/code sandbox version of this example that shows which packages are necessary for customizing a component? I am struggling with what to import to properly render a component outside of the storybook environment/without importing the @spectrum-web-components/bundle package

[Westbrook]

Could you share a little more as to what you mean by "customizing a component"? If visit the index.ts file in any of the demos in this link, you'll get a full example of what would be needed when not leveraging @spectrum-web-components/bundle for that usage: https://studio.webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Muvuvbd79YCP9tcdtnsW/src/index.ts?p=stories

[bossanovaorca]

oh I just wanted to first render a component in a demo project and play around with its variants locally

After removing the swcThemeDecorator in the webcomponents.dev examples, I wasn't sure what the minimum requirements are to get the component rendering properly again. Right now I am importing the theme helper to render the components, but I'm not sure if I can do away with that and import even smaller pieces to just get the components to be styled properly

https://studio.webcomponents.dev/edit/L7sB73EIJDlMUvl5iPPL/src/index.stories.js?p=stories

[Westbrook]

There are ways that do not require the <sp-theme> element, but it is far and away the simplest way to theme your page. You can learn more about leveraging it, as well as only the theme fragments needed for you application, in our docs site, here: https://opensource.adobe.com/spectrum-web-components/tools/theme/#classic.

In the case that you are leveraging CSS build tools, you could choose to apply a static theme via CSS, e.g. https://unpkg.com/browse/@spectrum-web-components/[email protected]/all-medium-light.css will give you the entire Spectrum Classic theme in the "medium" scale and the "light" color stops.

[bossanovaorca]

ok I understand, I'll continue using sp-theme. thank you for the explanation!