package Ġk z . be ig am . component . show case Ċ Ċ import Ġcs stype . Align Items Ċ import Ġcs stype . px Ċ import Ġkotlinx . js . js o Ċ import Ġm ui . icons . material . Volume Down Ċ import Ġm ui . icons . material . Volume Up Ċ import Ġm ui . material . Slider Ċ import Ġm ui . material . Stack Ċ import Ġm ui . material . Stack Direction Ċ import Ġm ui . system . Responsive Style Value Ċ import Ġreact . FC Ċ import Ġreact . Props Ċ import Ġreact . dom . aria . aria Label Ċ import Ġreact . useState Ċ Ċ val ĠSlider Show case Ġ= ĠFC < Props > Ġ{ ĊĠĠĠ Ġvar Ġvolume Ġby ĠuseState ( 3 0 ) ĊĊĠĠĠ ĠStack Ġ{ ĊĠĠĠĠĠĠĠ Ġsx Ġ= Ġj so Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠmarginBottom Ġ= Ġ 1 . px ĊĠĠĠĠĠĠĠĠĠĠĠ ĠalignItems Ġ= ĠAlign Items . center ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġspacing Ġ= ĠResponsive Style Value ( 2 ) ĊĠĠĠĠĠĠĠ Ġdirection Ġ= ĠResponsive Style Value ( Stack Direction . row ) ĊĊĠĠĠĠĠĠĠ ĠVolume Down () ĊĊĠĠĠĠĠĠĠ ĠSlider Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġaria Label Ġ= Ġ" Volume " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= Ġvolume ĊĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġ{ Ġ_, ĠnewValue , Ġ_ Ġ-> Ġvolume Ġ= ĠnewValue Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ ĠVolume Up () ĊĠĠĠ Ġ} ĊĊĠĠĠ ĠSlider Ġ{ ĊĠĠĠĠĠĠĠ Ġaria Label Ġ= Ġ" Disabled Ġslider " ĊĠĠĠĠĠĠĠ Ġdisabled Ġ= Ġtrue ĊĠĠĠĠĠĠĠ ĠdefaultValue Ġ= Ġ 3 0 ĊĠĠĠ Ġ} Ċ } Ċ