Slider

[ulde01]

Design update 2020-04-17

Change Have a look at the specification (link below) because the component has been redesigned in a few ways, but a couple of details are:

• No chevron
• Line: Height 4 px, rounded corners
• Thumb size: 24 x 24 px
• Hover state: Thumb is enlarged
• Focus state: Thumb is framed

Details https://designlibrary.sebgroup.com/components/slider/#specification

Component identifier component-slider (Slider is built in Vanilla and React.)

/Ulrika, Design management

• [x] Vanilla: https://github.com/sebgroup/vanilla-pattern-library/issues/207
• [x] Bootstrap: https://github.com/sebgroup/bootstrap/issues/310
• [x] Angular: https://github.com/sebgroup/ng-components/issues/194
• [ ] AngularMaterial: https://github.com/sebgroup/seb-angular-material/issues/102
• [x] React: https://github.com/sebgroup/react-components/issues/298
• [x] Delorean: https://github.sebank.se/delorean/portfolio-overview/issues/208

[henrikhoglundseb]

I have some suggestions on a iterated design and more option like a range-selector. rey have the need in her project for that component.

She might take this further.

[rey]

?

[henrikhoglundseb]

hihi, wrong rey :)

[TheresaHedlund]

Hi, Maybe we can just do minor adjustments on the one we have. Some suggestions;

• make the drag thing less wide
• adding +/ - for changing values step by step
• possibility to add max/min values

Quick sketch:

[rey]

adding +/ - for changing values step by step

I'm not sure whether the +/- add much value? Though it would depend on the scale of numbers that's being used e.g. 1 ➡️ 5 vs. 1 ➡️ 100.

[TheresaHedlund]

adding +/ - for changing values step by step

I'm not sure whether the +/- add much value? Though it would depend on the scale of numbers that's being used e.g. 1 ➡️ 5 vs. 1 ➡️ 100.

Could be optional. Also the values under slider might not always be needed.

[henrikhoglundseb]

I agree with Rey. I think the + and - add more complexity and removes some off the slider behavior.

I like the possibility to add min and max values and to add scaling, if its needed.

I would like to make the slider buttons round. Having square or rectangular slider-buttons just feels wrong. Its more comon to have them round.

[conandx]

We have previously discussed to have the possibility to let the slider snap to set intervals, for intance even 1000 or similar (depending on scale). Very many of the features of a slider should be optional so it's possible to set it up for each occasion.

[EldRoos]

React components now have an updated version of slider with hover and focus states. Henrik and Ulrika was in on this.

We have choosen version 1 of these for focus:

Hover animates to a bit larger:

Negative slider:

---

Me and Jessi have taken the torch and made a few suggestions for new graphics. Where the 3rd from bottom is the favorite:

Note: but this small one needs to have a bigger hitbox for big fingers.

[TheresaHedlund]

Me and Jessi have taken the torch and made a few suggestions for new graphics. Where the 3rd from bottom is the favorite

Yay! Will work so much better when it's smaller :D I also like the classic round ones. They feel very touch/drag friendly, since you're so used to them.

[ulde01]

Nice!

[ghost]

I hear you @TheresaHedlund But think the square one is more in line with our other button like components. We need to make sketches on more features right? But let´s start with this small update? Anyone else have comment? /Jessi

[henrikhoglundseb]

I cast my vore on circular “sliders” some components just look better, I understand that we are the square brand.

Just want to add my comment.

Sent from my iPhone

On 20 Nov 2019, at 13:15, JessiNygrenWalhed notifications@github.com wrote:



I hear you @TheresaHedlundhttps://github.com/TheresaHedlund But think the square one is more in line with our other button like components. We need to make sketches on more features right? But let´s start with this small update? Anyone else have comment? /Jessi

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/sebgroup/design-library/issues/18?email_source=notifications&email_token=ALDQHDYOJZ3WE3ONEA4RIK3QUUS7FA5CNFSM4GQZ67OKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEERZCEI#issuecomment-555979025, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ALDQHD4VHN6NTLQPZZWOHXTQUUS7FANCNFSM4GQZ67OA.

[TheresaHedlund]

I hear you @TheresaHedlund But think the square one is more in line with our other button like components. We need to make sketches on more features right? But let´s start with this small update? Anyone else have comment? /Jessi

Yeah, I guess. Unless you want to compare with a toggle. ;)

Square is fine with me. As long as they get smaller!

[conandx]

I absolutely think we should keep it simple. I've seen both square and round controlls, and in that context I beleive the square is more appropriate for our design scheme.

[henrikhoglundseb]

Should we change the toggle switch also then ?

---

From: Conny Andersson notifications@github.com Sent: 22 November 2019 14:31:24 To: sebgroup/design-library Cc: Höglund, Henrik; Comment Subject: Re: [sebgroup/design-library] Slider (#18)

I absolutely think we should keep it simple. I've seen both square and round controlls, and in that context I beleive the square is more appropriate for our design scheme.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/sebgroup/design-library/issues/18?email_source=notifications&email_token=ALDQHD7IOOE5OMQ6WYEIVB3QU7NKZA5CNFSM4GQZ67OKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEE5ULTQ#issuecomment-557532622, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ALDQHDYE4KOBSA4AHMT6CDTQU7NKZANCNFSM4GQZ67OA.

[EldRoos]

We will have a meting about the new design soon, who want to join in addition to me - Leopold Roos, and Jessi Nygren Walhed?

What features are missing in current design? Except the range feature.

Also: Yea I think the toggle should also be squarish :). Good to be a bit different to others.

[henrikhoglundseb]

I would like to join. Im working on a new small project that is based on sliders

Sent from my iPhone

On 5 Dec 2019, at 10:12, EldRoos notifications@github.com wrote:

 CAUTION: This email originated from outside of the organization.

---

Do not click links or open attachments unless you recognize the sender and know the content is safe.

We will have a meting about the new design soon, who want to join in addition to me - Leopold Roos, and Jessi Nygren Walhed?

What features are missing in current design? Except the range feature.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/sebgroup/design-library/issues/18?email_source=notifications&email_token=ALDQHD5COWGCQWCD73QA2M3QXDAXHA5CNFSM4GQZ67OKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGAAUIY#issuecomment-562039331, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ALDQHD7JNDKFA2NMRVSN5CLQXDAXHANCNFSM4GQZ67OA.

[EldRoos]

We had a meeting about Slider component and decided to mostly change the visual this time. Extra features can wait until someone actually needs them – agile way.

• Lighter gray on the bar:en (gray-400 #cecece instead of gray-300 #dedede). • Bar should have rounded edges (4px border-radius instead of none).´ • Blue bar should start from 0 or other defined in midpoint (not all to the left like before). • Thumb should be smaller square (24x24px instead of 48x32px) with round borders (4px border-radius). No lines or chevrons inside. • Focus as the earlier prototype – lightblue thick line with (3px with 4px border-radius) on thumb. • Hover as the earlier prototype – increase size animation of 5% on thumb. • Tooltip should have no border-radius on the black square (instead of 4px). • Tooltip should support thousand deliminator and unit.

Range slider have to be defined by the one that needs it. But should follow same style.

[ulde01]

@EldRoos is updating the design after the design meeting from before Christmas. Updated design and description to follow.

[ulde01]

Denna komponent är inte uppdaterad i Sketch. Leopold har uppdaterat i React. 24 x 24 thumb, chevron är borttagna, 4 px height på linjen som även har rundade hörn. På hover förstoras tummen och på focus så blir det en ram runt tummen.