example.html

<div ng-init="showHide = 15;">
  <div class="row">
    <div class="small-8 medium-10 columns">
      <range-slider ng-model="showHide"></range-slider>
    </div>
    <div class="small-4 medium-2 columns">
      <input type="number" ng-model="showHide">
    </div>
  </div>
  <div class="row">
    <div class="small-4 medium-3 columns">
      <button ng-click="hideSliders = !hideSliders">Toggle Sliders</button>
    </div>
    <div class="small-8 medium-9 columns">
      <div class="row">
        <div class="medium-4 columns">
          <div ng-show="!hideSliders">
            <label><code>ng-show</code> on containing <code>&lt;div&gt;</code></label>
            <range-slider ng-model="showHide"></range-slider>
          </div>
        </div>
        <div class="medium-8 columns">
          <label><code>ng-hide</code> on <code>&lt;range-slider&gt;</code> itself</label>
          <range-slider ng-model="showHide" ng-hide="hideSliders"></range-slider>
        </div>
      </div>
      <div class="row">
        <div class="medium-7 columns">
          <div ng-if="!hideSliders">
            <label><code>ng-if</code> on containing <code>&lt;div&gt;</code></label>
            <range-slider ng-model="showHide"></range-slider>
          </div>
        </div>
        <div class="medium-5 columns">
          <label><code>ng-if</code> on <code>&lt;range-slider&gt;</code> itself</label>
          <range-slider ng-model="showHide" ng-if="!hideSliders"></range-slider>
        </div>
      </div>
    </div>
  </div>
</div>