Front-End System Design - Slider Component

hello everyone and welcome to my channel today's topic is frontend system design for slider let's talk about what slider is a slider is a tool on website that lets users be a within a certain range I thought about whether to use the basic slider that comes with the web browsers or to make a custom one I decided it will be more exciting to design a custom slider before we dive in let's categorize sliders into three types video slider histogram slider and just simple slider creting a universal design that feeds all these types will be challenging plus I believe maintaining such a slider would not be as simple so we will focus on designing just a single slider our plan is on the screen so let's start from the functional requirements in the first requirement is immediate interaction the SL response right away when the user moves the slamp show and changes at once the next one is value limits the minimum and maximum value thatly remarked on the sliders to users know the range next vertically out the slider can be placed vertically on horizontally the next one is Step support the step attribute specifies the interval between numbers snap to steps the slider samp moves to the lowest valid number by itself to help users peaked EXA values adaptability for duration sliders should work both ways left to right and right to left for different reading Styles the next one is thumb size make sure the sler samp is big enough to C easily the next one is hover indication when you hover over the samp or the thre of the slider the orur should change to show it and be moved and disabled State handling if the slider is turned off it should stay put and not react to leas or AO now let's talk about nonfunctional requirements let's add a new block and add our requirements here the first one is responsive design the slider must work well on all devices RS Rose browser compatibility the slider must work on different web browsers the next one is accessible use the slad can be used with assive Teck and by aort for all users and the last one is Fast Response the Slader must work fast without any weight when users interact with it now let's consider our UI let's create a new block for UI and add a few inputs here let's add just simple input with in input with steps and value and let's create a new one but with two thms okay let's start what TR is the long horizontal line represents the slider stay is divided into two sections the active section which is filled in with or to the left on the samp and the inactive section which is plan and extends to the right of the SU up to the maximum value the next one is sum the sum is shown as a small circle on the TR this is the part of the slider that users in Le on drag to adjust the value the next one is T marks there are small lines along the active part of the tray or t marks which help users understand the inrs in the sliders range the next one is value indicator above the Ed of TR and samp there is a value indicator shaped like a spech bubble with a point directed towards the samp it displays the current value which in this case is 60 and the last one is mean and mass values on the left and right ends of the TR we see the labels mean value and Max Valu so in the 18 in the range of the sliders also mean and Ma vales and be use it within the another input where we use mean and Max values as sums now when we created our UI let's create interface for our component I will add interface slider component options with no values now let's start adding our values one by one and the first one is id id has Type string and it uses to reference the slider elements with label the next one is name with string type name us it to reference elements in JavaScript the next one is type it can be single or mean Ms slider can have one or two sums so when we use single it has one sum and when we use minan MKS we use two sums the next one is value value is optional number required for single samp slider so when we have type single it's required but when we use Min mass then it's not required anymore the next field is minan value which is optional number as well mean value and mass value which will be the next one can be used for one Su slider as well but they required for chose s slider so it means that mean and Max values and we use it with both single and mean mass types but they have different responsibilities with single type they show mean and mass values as labels with mean mass type they work as a samps the next field the next optional field is Step which has number type it defines the steps in which is a slider and move when we have single type and want to have mean and M Val for accessibility for example but don't want to show them we can use should show mean and Max values it can be optional field which has Boolean type so it just shows mean and mass values on the screen the next one is value position it has Type value position it can be on to Left Right Etc it's when the value should be shown the next field is is vertical which is option and has buing type if the slider should be vertical or horizontal the next one is shoot snap which is also optional and Boolean value it helps users to use steps it will move to the closest step upon clicking so when we click between two steps it should go to the closest step the next one is is disabled value which is optional and Boolean it defines if the slider is disabled next one is samp it's optional function this is function that Returns the custom s element it receive values which is also optional and returns HTML element the next one is threat style which is optional and has CSS properties type it just set styles to customize the thre the same but for the step Styles as well it's just styles to customize steps Source Style on active it's our optional and next field which has a source style type it should receive some CSS styles to apply when the samp is active for example on hover or focus and let's add our event all Bs the first one is on change it's all B after value changes it receive value and just return nothing and two more all by the first one is on start it's all by one sliding start and on end it's all after sliding ends they both return nothing now let's add a new topic and discuss how can we optimize our component and the first one is Media ques use media ques to change the size of the slider stay and samp based on the ring size on smaller Rens you might want to make the samp bigger for easier interaction so to make responsive s we need to use CSS the next one is CSS supports it help us to specify CSS declarations that depend on a browser's support for CSS features so using supports we can write that CSS which will be appropriate for a browser the support rule in CSS can be particularly useful for optimizing a slider by ensuring that you use the most efficient and appropriate Styles based on the browser capabilities it doesn't directly optimize the performance of the slider but rather allows you to write CSS that is a performant as possible within the constraints of each browser support for modern CSS features the next requirement is throttling throttling is a good choice for animating as sliders some because it ensures that the animation updates happen at a consistent controlled rate this prevents the animation from becoming Choy and keeps the interface responsive without overloading the browser with too many updates Minify and compress our solution is our next requirement minifying involves removing all the we space in the file that is only there for human readability once the O is put into production now the main question how we move a samp element using transform translate or animated left property let's on see the advantages and disadvantages of each approach the first one will be position absolute and left property and here advantages Simplicity it's straightforward to understand and Implement especially for beginners find onol offers Pixel Perfect position making it easy to place the element precisely where you want now let's consider disadvantages from disadvantages we can ED performance animating the live property and lead to less efficient animations it and also ref flows and repain because the browser needs to LED layout which can be particularly t on low powered devices the next one smoothness while widely supported using left for animation isn't always the best choice for a achieving smooth transitions across all devices now let's on the animation using transform translate this approach has such advantages performance our first Advantage transform translate is more performant than anima left this is because changes to transforms how BRS Handle Sub pixel rendering however this can be mitigated with proper Salen or by ensuring pixel values around it use CSS a frame animations or css transitions if it's all possible the browser and optimize painting and composting big time here and there using 2D transforms instead of absolute Position will typically provide B at VPS by way of a smaller pain times and smoother animation good now let's talk about accessibility by the way do you he about the accessibility of your project leave answers under the video our first re Mind Is AO support users should be able to change the value using AO only all functionality must be operable using aort the next one is on trust our input should have enough contrast to be visible then input purpose inputs should have their purpose ID for user assistance the next one is orientation on T must work in any orientation portrait or landscape orientation which we discussed before it's more about design rather than accessibility but even if you have vertical Asom input it should have have area orientation set to Vertical the default value of area orientation for a slider is a horizontal so don't forget to update it the next one is animation from interactions motion animation triggered by interaction and be disabl input should work well without animation errors identification our answer enironment errors are identified and described in test the next one is focus visible a focus indicator is visible on user interfaces so please don't hide it and the last one is screen reader friendly it should announce what name and type of the input what is mean and mass values and arent value everything should be scen reader friendly that's all for today's video let me know which topic will be interested for you in the future in the comments thank you and see you next time bye

Channel: WebForDevs

Views: 207

Keywords: Front-End System Design - Slider Component, frontend system design, front end, system design, front end system design, front-end system design interview, front-end system design, system design interview, frontend fundamentals, faang frontend, javacript system design, front system design interview, frontend system design interview questions, frontend system design course, frontend system design tutorial, slider component, front end slider, webfordevs

Id: g_Nhu3u0_t0

Length: 15min 33sec (933 seconds)

Published: Fri Apr 05 2024