title: How to bind "readonly" in custom element in Aurelia?
body: <p>I have the following element in html file:</p>
  
  <pre><code>&lt;require from="_controls/time-slot-slider"&gt;&lt;/require&gt;
  
      &lt;time-slot-slider id="zeitraum" min="0" max="24" length="4" value="4"
                                value.two-way="functionConfig.startTime" if.bind="functionConfig.isAutomatic === true"
                                readonly.bind="!mayFunctionTestEditTime"&gt;&lt;/time-slot-slider&gt;
  </code></pre>
  
  <p>Custom element is here(time-slot-slider.html):</p>
  
  <pre><code>&lt;template class="range-slider time-slot"&gt;
    &lt;div&gt;${duration}&lt;/div&gt;
    &lt;input type="range" min.bind="min" max.bind="maxStart" step.bind="step" value.bind="value"&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>and time-slot-slider.ts :</p>
  
  <pre><code>import { bindable, customElement } from 'aurelia-templating'
  import moment from 'moment/moment'
  import Moment = moment.Moment
  
  @customElement('time-slot-slider')
  export class TimeSlotSlider {
  
    @bindable public min: number = 0.0
    @bindable public max: number = 24.0
    @bindable public step: number = 0.5
    @bindable public value: number = 0.0
    @bindable public length: number = 4.0
  
    public get maxStart (): number {
      return this.max - this.length
    }
  
    public get from (): Moment {
      return TimeSlotSlider.numberToMoment(this.value)
    }
  ....
  </code></pre>
  
  <p>But <strong>readonly.bind</strong> doesn't work. I tried to bind readonly by </p>
  
  <p><code>@bindable readOnly: boolean</code> but I didn't have any success. How can I fix it?</p>