module VerticalSlider exposing (..)

import Browser
import Element exposing (..)
import Element.Background as Background
import Element.Border as Border
import Element.Input as Input
import Html exposing (Html)


type Msg
    = UserMovedSlider Int


type alias Model =
    { value : Int }


view : Model -> Html Msg
view model =
    layout [ width fill, height fill ] <|
        column
            [ padding 50 ]
            -- A slider can be made vertical using a fixed width and `height fill`
            -- or fixed height and width such thath height > width
            [ Input.slider
                [ height <| px 300
                , width <| px 30
                , behindContent <|
                    -- Slider track
                    el
                        [ width <| px 20
                        , height fill
                        , centerX
                        , Background.color color.blue
                        , Border.rounded 6
                        ]
                        Element.none
                ]
                { onChange = UserMovedSlider << round
                , label =
                    Input.labelAbove [] <|
                        text ("Integer value: " ++ String.fromInt model.value)
                , min = 0
                , max = 100
                , step = Just 10
                , value = toFloat model.value
                , thumb = Input.defaultThumb
                }
            ]


init : Model
init =
    { value = 50 }


update : Msg -> Model -> Model
update msg model =
    case msg of
        UserMovedSlider v ->
            { model | value = v }


main : Program () Model Msg
main =
    Browser.sandbox
        { init = init
        , view = view
        , update = update
        }


color =
    { blue = rgb255 0x72 0x9F 0xCF
    , darkCharcoal = rgb255 0x2E 0x34 0x36
    , lightBlue = rgb255 0xC5 0xE8 0xF7
    , lightGrey = rgb255 0xE0 0xE0 0xE0
    , white = rgb255 0xFF 0xFF 0xFF
    }