locked
[UWP][WinJS][Insider Bug] Sliders are not working inside a listview RRS feed

  • Question

  • Hello, I got a bunch of reports from people who use my app and are on the insider preview. They said that the sliders inside my listviews are not working. I downloaded the Mobile Emulator Insider Preview here: https://www.microsoft.com/en-us/software-download/windowsinsiderpreviewSDK to test it myself and it was in fact not working. It works fine on the normal build, but doesn't work when using the insider preview. I think that this is another insider bug and I would like to report this to the corresponding team.

    Here is a sample project with a declarative and imperative template. Both don't work:

    Download: https://1drv.ms/u/s!ArNSvnSslEHXgoYd_kXzOX3npfEDZg

    Code:

    ListView

    	<div id="ListView"
    		 class="listView win-selectionstylefilled"
    		 data-win-control="WinJS.UI.ListView"
    		 data-win-options="{
    						itemDataSource: MainPage.MyBindingList.dataSource,
    						itemTemplate:  MainPage.myTemplateFunction,
    						selectionMode: 'none',
    						tapBehavior: 'none',
    						layout: { type: WinJS.UI.ListLayout }
    					}">
    	</div>

    Javascript & template function

    	let myArray = [{ name: "Item 1" },
    	{ name: "Item 2" },
    	{ name: "Item 3" },
    	{ name: "Item 4" },
    	{ name: "Item 5" },
    	{ name: "Item 6" },
    	{ name: "Item 7" },
    	{ name: "Item 8" },
    	{ name: "Item 9" },
    	{ name: "Item 10" }];
    
    	WinJS.Namespace.define("MainPage", {
    		MyBindingList: new WinJS.Binding.List(myArray),
    		myTemplateFunction: WinJS.Utilities.markSupportedForProcessing(myTemplateFunction)
    	});
    
    
    	function myTemplateFunction(itemPromise) {
    		return itemPromise.then(function (item) {
    			//Listview Template
    			let divListViewItem = document.createElement("div");
    			divListViewItem.className = "divItem";
    
    
    			//name
    			let divListViewItemName = document.createElement("div");
    			divListViewItemName.innerText = item.data.name;
    			divListViewItem.appendChild(divListViewItemName);
    
    			//slider (working on normal build, not working on insider build)
    			let slider = document.createElement("input");
    			slider.className = "win-slider";
    			slider.setAttribute("type", "range");
    			slider.setAttribute("min", "0");
    			slider.setAttribute("max", "100");
    			slider.setAttribute("step", "1");
    			slider.setAttribute("value", "100");
    
    			divListViewItem.appendChild(slider);
    
    			return divListViewItem;
    		})
    	}

    declarative listview template (slider also doesnt work here)

    	<div class="listViewTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    		<div class="listViewItem">
    			<div data-win-bind="textContent: name"></div>
    			<input type="range" class="win-slider" min="0" max="100" step="1" value="100" />
    		</div>
    	</div>

    Monday, February 20, 2017 9:23 PM

Answers

  • Hello, I just want to say that this is not an insider preview bug. It's because I didn't use the win-interactive class on the slider. Not sure why it worked on normal builds, but that is the fix for that!
    • Marked as answer by VictorJOD Thursday, March 2, 2017 4:01 AM
    Thursday, March 2, 2017 4:01 AM

All replies

  • Hi VictorJOD,

    Thanks for your feedback. I have tested your project on my Surface Pro 4 (14393) where the slider in ListView works fine and on my Lumia 830 (insider 15007) where it doesn’t work. I have reported this issue. 

    Best Regards,
    David

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by VictorJOD Thursday, February 23, 2017 1:21 AM
    • Unmarked as answer by VictorJOD Thursday, March 2, 2017 4:01 AM
    Wednesday, February 22, 2017 2:20 AM
  • Hello, I just want to say that this is not an insider preview bug. It's because I didn't use the win-interactive class on the slider. Not sure why it worked on normal builds, but that is the fix for that!
    • Marked as answer by VictorJOD Thursday, March 2, 2017 4:01 AM
    Thursday, March 2, 2017 4:01 AM