Websharper를 사용하여 슬라이더를 만들려면 어떻게해야합니까?

Question

저는 Websharper를 배우기 때문에 아직도 혼란 스럽습니다.

let btn caption action = 
    Input [Attr.Type "button"; Attr.Value caption; Attr.Style "width: 30px"] 
    |>! OnClick (fun e _ -> action()) 

다음 Intellifactory 샘플에

는 계산기 샘플 코드 Webshaper 일부 GUI 컨트롤을 제공하지만 경우 디스크에 설치 코드가 자신의 도우미 함수를 사용하기 때문에이 같은 버튼을 만들 Button를 사용하는 것 같다 상세 페이지

마치 Webshaper에 기본 GUI 컨트롤이 포함되어 있지 않으므로이를 얻기 위해 이와 같은 작업을 수행해야합니다 (Websharper와 같은 추상화의 목적을 무력화시키는 것처럼 보입니다).

값이 변경 될 때마다 호출되는 콜백이있는 슬라이더를 원합니다. Websharper를 사용하여 어떻게 얻을 수 있습니까?

Answer 1

당신은 JQueryUI에서 슬라이더를 사용할 수 있습니다 또한 JQuery와 UI 코드를 좀 더 입력을 추가하려고 도서관이

[<JavaScript>] 
override this.Body = 
    let text = Span [] 
    let slider = Slider.New(SliderConfiguration(min = 0, max = 10, value = 5)) 
    // typed way to subscribe doesn't work, internally tries to bind handler to 'sliderslide' event 
    // per documentation (http://api.jqueryui.com/slider/#event-slide) should be 'slide' 
    // slider.OnSlide(fun _ -> text.Text <- string slider.Value) 
    JQuery.JQuery.Of(slider.Widget).Bind("slide", Func<_, _, _>(fun _ _ -> text.Text <- string slider.Value)).Ignore 
    Div [ 
     Div [ slider ] 
     Div [ text ] 
    ] :> _