Mithril Slider

by ramnathv

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid" id='main'>
    <div class="row">
        <div class="col-xs-8 col-md-6" id="mount">
            
        </div>
    </div>
</div>

CSS

#main{margin-top: 40px;}
.distribution{margin-bottom: 20px;}

CoffeeScript

binds = (opts) ->
  args = opts()
  args.onchange = (e) ->
    if e.target.getAttribute("type") is 'number'
      opts().max = e.target.value*1.5.toString()
      opts().min = e.target.value*0.5.toString()
    opts().value = e.target.value
    console.log(opts().value)
  args
    
Katex = 
  view: (c, args) ->
    m 'div', {
       config: (el) -> katex.render(args.expr, el)
     }

Katex2 = 
  view: (c, args) ->
    m 'div', m.trust(katex.renderToString(args.expr))

Slider = 
  view: (ctrl, args) -> 
   m 'div', [
    m 'div', [
      m 'label.pull-left', m.component(Katex2, {expr: args.opts().expr})
      m 'input[type="number"].pull-right', binds(args.opts)
    ],
    m 'div', 
     m 'input[type="range"]', binds(args.opts)
    
   ]


Dist = 
  controller: (args) ->
  view: (ctrl, args) ->
    m ".app", [
      args.opts.map (o) -> m.component(Slider, {opts: o})
      m('br')
      m 'label', "PDF"
      m.component(Katex, {expr: args.pdf})
    ]

App = 
  controller: (args) ->
   dist: m.prop("normal")
  view: (ctrl, args) ->
    #console.log(JSON.stringify(args.data[ctrl.dist()].opts))
    m 'div.app.well', 
      m 'label', "Select distribution"
      m 'select.form-control.distribution', {
          onchange: m.withAttr("value", ctrl.dist)
          value: ctrl.dist()
        }, 
        Object.keys(args.data).map (d, i) -> m 'option', d
      m "label", "Select parameters"
      m.component(Dist, args.data[ctrl.dist()])
        
  
data =  {}
data.normal =
  opts: [
    m.prop
      min: "0"
      max: "10"
      value: "5"
      expr: "\\mu"
    m.prop
      min: "0"
      max: "10"
      value: "5"
      expr: "\\sigma"
  ]
  pdf: """
    \\left(2\\pi\\sigma^2\\right)^{-\\frac{1}  {2}}\\exp\\left\\{-\\frac{1}{2\\sigma^2}\\left(x-\\mu\\right)^2\\right\\}
  """
    
data.gamma =
  opts: [
    m.prop
      min: "1"
      max: "20"
      value: "5"
      expr: "k"
    m.prop
      min: "1"
      max: "20"
      value: "5"
      expr: "s"
  ]
  pdf: """
  ...