hoangjk / nativescript-range-seek-bar Goto Github PK

<Page loaded="onLoaded" shownModally="onShowModally" navigatingFrom="onClose" xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true"
	xmlns:rsb="nativescript-range-seek-bar" >

  <GridLayout rows="50,*,50">
  	<Label row="0" text="Filter Results" class="m-15" />
  	<StackLayout row="1" class="p-15">
			<Label text="Weight" class="h3 text-black m-b-10" />
			<StackLayout>
				<rsb:RangeSeekBar class="range-seek-bar" minValue="{{ minWeight }}" maxValue="{{ maxWeight }}" minStartValue="{{ weightLow }}" maxStartValue="{{ weightHigh }}" step="{{ step }}" minRange="1" rangeSeekBarChanged="weightChanged" />
			</StackLayout>
			<!-- <rsb:RangeSeekBar class="range-seek-bar" minValue="0" maxValue="100" minStartValue="20" maxStartValue="80" step="1" rangeSeekBarChanged="weightChanged" />  This works fine -->
			<GridLayout columns="1*,2*,1*">
				<label col="0" text="{{ minWeight }}" />
				<Label col="1" text="{{ weightLow+' to '+weightHigh+' gms' }}" class="h3 text-black" horizontalAlignment="center" />
				<label col="2" text="{{ maxWeight }}" horizontalAlignment="right" />
			</GridLayout>
	  </StackLayout>
		<GridLayout row="2" columns="1*,1*" height="50">
			<GridLayout col="0" class="bg-secondary" height="100%" tap="cancelSort">
				<Label col="0" text="Cancel" class="h3 center" verticalAlignment="center" />
			</GridLayout>
			<GridLayout col="1" class="bg-primary" height="100%" tap="applySort">
				<Label col="0" text="Apply" class="h3 text-black center" verticalAlignment="center" />
			</GridLayout>
		</GridLayout>
	</GridLayout>
</Page>

const observableModule = require("data/observable");
var page;
var filterVM;
var closeCallback;
var filters = {};

exports.onLoaded = function(args) {
  page = args.object;

  filterVM = new observableModule.Observable();
  page.bindingContext = filterVM;
}

exports.weightChanged = function(event) {
  console.log("rangeSeekBarChanged: ", event.value);
  if(filterVM != undefined){
    filterVM.set("weightLow", event.value.minValue);
    filterVM.set("weightHigh", event.value.maxValue);
  }
}

exports.onShowModally = function(args){
  var context = args.context;
  closeCallback = args.closeCallback;

  console.log(context);
  filterVM.set("minWeight", Math.floor(9.90));
  filterVM.set("maxWeight", Math.ceil(190.00));
  filterVM.set("weightLow", Math.floor(9.90));
  filterVM.set("weightHigh", Math.ceil(190.00));

  var step = Math.round((context.maxWeight - context.minWeight)/40)
  filterVM.set("step", 1);
  // filterVM.set(context, true);
}