Custom Select

customSelect.html

{{#with view}}
  <li class="title">
    {{title}} 
    <small class="pull-right">(Select One)</small>
  </li>

  {{#each options}}
    <li {{bindAttr class=":option"}}>
      <span class="name" data-id="{{unbound id}}">{{label}}</span>
      <a class="toggle-settings pull-right">
        <i class="icon-adjust icon-white"></i>
      </a>
      <div class="settings">
        <input type="range" name="transparency-{{unbound id}}" 
            min="0" max="1" step="0.01" value="{{unbound transparency}}" />   
      </div>
    </li>
  {{/each}}
{{/with}}

CustomSelectView.js

App.CustomSelectView = Ember.View.extend({
  templateName: "customSelect",
  tagName: "ul",
  classNames: ["custom-select"],
  title: "Custom Select",
  options: null,
  selectedVarName: "selectedBasemap",
  selectedOptions: [],
  click: function (event) {
    var $this = $(event.target),
      $options = $this.closest(".custom-select").find(".option"),
      $option = $this.closest(".option"),
      $name = $option.find(".name"),
      selected;

    if($this.hasClass("option") || $this.hasClass("name")) {
      $options.find(".settings").hide();

      selected = $name.attr("data-id");

      this.set("selected", selected);
      this.set("selectedOptions", []);
      this.get("selectedOptions").push(selected);

      this.setupController(this.get("controller"));
    }
    else if ($this.hasClass("title")) {
      $options.toggle();      
    }
    else if($this.hasClass("toggle-settings") || $this.hasClass("icon-adjust")) {
      $(":range").rangeinput();
      $this.closest(".option").find(".settings").toggle();
    }

    return false;
  },
  setupController: function (controller) {
    controller.set(this.get("selectedVarName"), this.get("selected"));
  },
  markSelected: function () {
    var $this = this.$(),
      $options = $this.find(".option"),
      id = this.get("selected");

    this.get("controller.controllers.map").send("changeBasemap", id);
    $options.removeClass("selected");
    $this.find(".name[data-id=" + id + "]").closest(".option").addClass("selected");
  }.observes("selected")
});

use.html

{{view App.CustomSelectView 
  optionsBinding="controllers.map.baseLayerOptions"
  selectedBinding="selectedBasemap"
  title="Base Maps"
}}